V4 Elements Video Estimated reading: 6 minutes 3 views Show a video from YouTube, Vimeo or your own file with a clean thumbnail and a play button. The video only loads when someone clicks play, so your page stays fast. No code needed. WIDGET Video SOURCES YouTube, Vimeo, Dailymotion, VideoPress, your own file PLAN Free A QUICK LOOK What You Will Build A video with a thumbnail and a round play button. A click on the button loads the video and starts it. Click the play button and the video starts BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Video widget is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Video under Video Widgets and switch it on. Click Save Settings. The Video card in your dashboard (click to zoom) Note: Do not mix it up with Video Mask. This page is about the Video widget. STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the video in. Click the + button at the top left to open the Elements panel. Look under AAE General for Video. Drag it onto your page. The Video in the Elements panel (click to zoom) Tip: Can not see it? Type Video in the search box at the top of the panel. Note: A new Video comes with a YouTube video already set, so you see a picture and a play button right away. STEP 3 Choose Your Video Open the Video Source section. Pick where your video lives, then paste its address. Under Source, choose YouTube, Hosted Video, External URL, Vimeo, Dailymotion or VideoPress. Paste the address of your video in the box that shows up, for example the YouTube URL. Click Update to save your page. Source (1) and the video address (2) (click to zoom) Tip: Use Hosted Video for a video file in your Media Library. Use External URL for a direct link to a video file. YouTube Paste the video page link from the address bar. Hosted Video Pick a video from your own Media Library. External URL A direct link to a video file on another site. Vimeo, Dailymotion, VideoPress Paste the page link of the video. STEP 4 Choose How It Plays Open the Playback section. Switch Autoplay on if the video should start by itself. Switch Mute on to start without sound. Browsers often need this for autoplay. Switch Loop on to play it again and again. Keep Lazy Load Player on so the video only loads when needed. This keeps your page fast. For YouTube, Privacy-Enhanced Mode can keep visitors from being tracked until they play. Autoplay (1), Mute (2), Loop (3), Lazy Load Player (4) and Privacy-Enhanced Mode (5) (click to zoom) Tip: Privacy-Enhanced Mode shows only for YouTube. For Vimeo, a Do Not Track switch shows up instead. STEP 5 Show or Hide the Controls The slim bar at the bottom has a play button, a progress line, the time, a volume button and a full-screen button. Open the Player Controls section. Switch Show Controls Bar on or off. Keep Auto-hide While Playing on so the bar gets out of the way while the video plays. Show Controls Bar (1) and Auto-hide While Playing (2) (click to zoom) STEP 6 Choose the Thumbnail The thumbnail is the picture people see before they press play. Open the Thumbnail section. Keep Use Thumbnail on to show a picture. Keep Auto-fetch Thumbnail on to use the picture of the video itself. Switch it off to choose your own image with Select image or Insert from URL. Use Thumbnail (1) and Auto-fetch Thumbnail (2) (click to zoom) STEP 7 Play Button and Overlay Make the play button stand out, and put a color over the picture. Open Play Button. Keep Show Play Button on. Switch Pulse Effect on for a soft pulsing ring. Open Overlay. Switch Enable Overlay on to darken the thumbnail. Open the Style tab to change colors and sizes. Show Play Button (1) and Pulse Effect (2) (click to zoom) Enable Overlay (1) (click to zoom) Tip: The default overlay color is a soft black, rgba(0, 0, 0, 0.4). STEP 8 Style It Each part has its own Style tab. Open the Structure panel to find them. Open the Structure panel. Open the Video. You will see the Video Player and the Video Play Button. Click a part and open its Style tab. Change the size, colors and shape. The Video (1), the Video Player (2) and the Video Play Button (3) (click to zoom) RESULT Final Result Two videos on a live page. The second has Enable Overlay and Pulse Effect switched on, so its picture is darker and its play button has a ring around it. Without an overlay (top) and with an overlay and pulse (bottom) SETTINGS Options Source Default: YouTubeYouTube, Hosted Video, External URL, Vimeo, Dailymotion or VideoPress. Autoplay Default: OffStarts the video by itself. Mute Default: OffStarts without sound. Loop Default: OffPlays again after the end. Lazy Load Player Default: OnLoads the video only when needed. Privacy-Enhanced Mode Default: OffYouTube only. Less tracking until the visitor plays. Show Controls Bar Default: OnThe slim bar at the bottom. Auto-hide While Playing Default: OnHides the bar while the video plays. Use Thumbnail Default: OnShows a picture before play. Auto-fetch Thumbnail Default: OnUses the picture of the video itself. Show Play Button Default: OnThe round play button. Pulse Effect Default: OffA soft ring around the play button. Enable Overlay Default: OffA color over the thumbnail. ID Optional CSS ID for the video. GOOD TO KNOW More Details Loads on click The player loads when someone clicks play, so a page with many videos stays fast. The picture comes from the video With Auto-fetch on, YouTube videos use their own picture. You need an internet connection to see it, including in the editor. Many videos Add as many videos as you like on one page. HELP Troubleshooting I do not see the Video in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Video. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. The video does not start Check that the address is right and that the video allows being shown on other sites. Then click Update and test on your live page. I see a grey picture The thumbnail could not be fetched. Check the video address, or switch off Auto-fetch Thumbnail and choose your own image. Autoplay does not work Most browsers only allow autoplay when the video is muted. Switch Mute on too. I want no controls bar Open Player Controls and switch Show Controls Bar off. You Did It Your page now plays video in a fast, clean way. If you face any problem, please contact our support team. We are happy to help.
