You may wish to upload and host your own videos instead of use a video streaming service to place videos on your page. You can use the Self-hosted Video module to do so.
The advantage of using a self-hosted video (as opposed to the oEmbed module) is you will have greater control of how your video is displayed on your page. However, the video will load slower than using a video service since it is being hosted through your own hosting service.
Note: the Self-hosted Video module is NOT the same as the oEmbed module, which is for embedding content from streaming services such as YouTube or Vimeo.
Placing the Module
From the top bar of the Semplice editor, look for the self-hosted video module icon and drag a new module onto your page.
Uploading the video
In your self-hosted video options, you can now upload your video in .mp4 format from the Wordpress Media Library. Just upload the video like you would any other image or media type in Wordpress.
Note: you also have the option to paste in an external video link instead of upload your video through the Wordpress Media Library if you wish (if you have Vimeo Pro, you can get a direct video link in your video settings.) You can read more about how to get direct video links from services such as Amazon S3, Dropbox or Google Drive here.
Setting the image poster
You have the option to upload a poster image for your video, which is the thumbnail that will be displayed before your video plays.
Setting the video dimensions
Additionally, you can also set an aspect ratio for your video. It's important to set an aspect ratio for your videos to avoid your video being cropped on the page, or avoid black bars around your video. Common aspect ratios are 4:3 or 16:9, for example.
If you are unsure of your video aspect ratio, you can set the ratio in pixel values such as 1920:1080, for example.
Setting the video options
Lastly, you can also customize the display and functionality of your video by setting options such as autoplay, looping, or to hide controls.
Note: most browsers will block autoplaying video that contains sound, so it's generally recommended to mute the video if you have it set to autoplay. If you need to set custom menu items for each page, you can use the Conditional Menu plugin to do so.
Troubleshooting
The video will not display or is blank
- Ensure you are using .mp4 video format, which is the most widely used video format for web. Also ensure the video has been encoded and exported correctly. In some cases, if your video is 60fps it will not display and you may need to change it to 30fps.
- The video link is set to autoplay, but not muted. Most browsers will block autoplaying video that contains sound, so to avoid this you may need to mute your video.
The video has black bars around it or is cropping
- Ensure your Semplice theme is up-to-date under Appearance > Themes in Wordpress.
- Make sure you have a ratio set for your video. For example, if your video is 1920px by 1080px, you would need to set the aspect ratio as 1920:1080.
- If you want to hide the black background behind your video entirely, you can use the following CSS code and place it under Customize > Advanced > Custom CSS:
.ce-video .mejs-container {
background: transparent !important;
background-color: transparent !important;
}
Autoplay is not working
- Ensure that your video is set to mute. Autoplay will be ignored by the browser if your video is set to play audio.
- Filesize is too large. Large video files may take a long time to load and therefore will not autoplay right away. We recommend keeping your video filesize under 15mb to ensure quick loading when possible.