- Container: This fields specifies where you would like the video background. If you want it to cover the whole website, you would enter “body”. If you want the video background to be in a class called “.header” you would enter “.header”
- MP4: Link to the .mp4 file. For Safari and IE support.
- WEBM: Link to the .webm file. For Chrome, Firefox, and Opera support.
- Poster: This will be used for the fallback image if video background is not supported (mobile for example)
You’ll also notice the Advanced Options » section. We’ll go over that below as well:
- Overlay: Add a pattern overlay over the video.
- Turn Off Loop: Turns off the loop for Video Background. The video will only play once instead of repeating.
- Play Audio: If this option is enabled, it will play the audio on the video.
Video background is growing every day, and I love hearing suggestions from people using it. If you have any ideas on how to make the plugin better or just have something nice to say please contact me here or leave a comment below.
Below is a demo of Video Background. In this case I have an element with the class name: .video-box, this is used as the “container” field. Notice everything in the element is still shown with a video for a background. If you were to view this page from a mobile device, it would use the fallback poster image.