Spring Sale! Up to 50% off!

How to use the Video element in web design

Insert Videos the same way you add images and icons. You can expand a video to make a video background. You can use links to YouTube, Vimeo, and your hosting and upload videos.
Video Element

Browse By Feature Categories

Video URL

Video footages are very popular on modern websites, and it is also popular to host those videos on popular video services like YouTube and Vimeo. You can add the Video Element from the Add Menu and specify the Video URL in the Editor by clicking the Change Video icon and the Property Panel by entering the URL from YouTube or Vimeo in the corresponding property.

Video Upload

In addition to video services, so popular nowadays, you can upload your own Video to a website stored in the Madia Folder. Please note that your Video should be less than 10 MB. Add the Vidoe Element from the Add Menu. Choose the Upload Video option in the Editor or Property Panel, and upload your Video. Please also note that this option allows you to manage your previously uploaded videos in the Property Panel for the current Video.

Video Shading

In Modern Website design, it is popular to have texts and other Elements on the Background Videos. However, the text is not always visible on the Videos, as most footages are quite bright for the text readability. Therefore, many videos require shading if they are placed underneath the texts. To dim a video, select it. Then go to the Property Panel, locate the Shading section with illustrating icon, and drag the corresponding Slider.

Video Fit

Video sources either uploaded or linked may have various dimensions that may not properly fit the Video Element's proportions added to a web page. Also, the Element's measurements with the Video on the background may be different from the video source. Therefore you can fit your Video to Cover the Background or Fit a video fully to the sizes of a container element. Select the Video Element, go to the Property Panel, then change the Fit Option in the corresponding section.

Video Options

Videos both uploaded and linked can have various options applied to the player. You can select your video, go to the Property Panel, specify whether to play your video in a loop, show video information, start automatically, mute the player for video footage, and display controls.

Video Poster

Video frames can not always look beautiful in static, or you may want to have a gorgeous background on your web page, even for the disabled video playback. Therefore, you can add a Video Poster. Select a Video Element, then go to the Property Panel, click the button to Add Poster, upload it to your Media, if needed, and assign to the selected Video.

Free Templates with Video Element

Get started with our best templates, great for any business. Create and customize them with our powerful and free website builder with no code. All templates are mobile-friendly and look excellent on any device.

Learn How To Add the Video Element

In Nicepage, you can control any element. If you want to embed videos proceed to the add element menu in the application or online version, scroll the elements side list till you see the video, and click on it (Add Elements - Video - Add). For the responsive video element, you will see various blocks and presets with the pre-arrange video element position. Blocks can have videos as the video background, or as a separate block for which, same as an image element, you can change the size, position, and transparency. On the right side, where you see a default video URL, you can add a video link to your Vimeo element from its video hosting, a youtube video, or embedding video using a cloud hosting link from personal accounts.

Make sure to check how do videos display in various versions of your site and how do the title and media information visibility affect the overall view. So, how uploaded video in video element uses its basic settings? After adding the youtube element link or a link from other video hostings, you can loop video, make it automatically start when a visitor enters the page, mute video if the sound will distract visitors, or show controls color and other settings, which visitors might require to skip the content or adjust it.

Thoroughly research the terms & conditions of the web hosting which video file you are about to use. The terms of service of the video hosting may contain conditions to the display videos, hints on how to set video on your own site, or how to find creative commons videos you can use. Your own terms of service and support policy must always refer to, WordPress hosting, for example, that keeps your video file.