External Video Slides are included in MetaSlider Pro.
With External Video Slides you can build beautiful slideshows with videos hosted outside of your WordPress site.
External Video slides will display your MP4, WebM, and MOV videos with cover image, auto play, mute, lazy load, the ability to hide controls, and much more.
Add a new External Video Slide
- Click the “Add Slide” button to launch the Media Manager.
- In the left menu of the Media Manager, select “External Video”.
- Enter the URL for your video.
- Click “Add to slideshow”. Please note that your external video host may have restriction on other sites using videos from their service.
Configure your External Video slide
The “General” tab allows you to configure the parameters used for the external video. Here are the key settings:
- Mute video: This will disable the sound by default. Your visitor can choose to enable the sound.
- Show controls: This will load player bottom bar and play button on the video that allow visitors to move the video forward and back, mute, view in full screen mode and more.
- Auto play (may require video to be muted): This start the video as soon as the slide is displayed. When you enable this setting, also check “Mute video”.
- Lazy load video: This can increase how quickly your video appears for visitors.
- Loop video: This will allow to play the video in a loop and pause the slideshow until user decides to see the next slide.
Configure a cover for your External Video slide
Using the “Cover” tab you can choose a cover image for your video. This is useful to show as a placeholder when the video is not initialized or when “Lazy load video” is enabled.
- Click “Set cover image” and upload or choose an image from the Media library.
Preview your External Video slides in the admin area
While editing your External Video slides, place the cursor over the thumbnail to play the video. If you move the mouse away, the video will pause.
Errors with External Video Slides
It’s not unusual to see issues with videos hosted on external services. These services often have protections to stop other sites using their bandwidth. If this is happening with your video you may see an error like the one in your screenshot.
In your browser console, the error message may look like this next screenshot:
There are commonly errors related to CORS (cross-origin resources). If you see this problem, here are some suggested solutions:
- Check that the video or track file URL is correct.
- If you own the site that hosts the video files, adjust the CORS headers to allow to access to these file types: mp4, webm, mov, vtt and txt. This can be done with a plugin. You can also talk with your hosting company to see if they can make changes to your site’s server configuration.