To set your homepage background video:
- Go to the mbYTPlayer settings panel (you can find it under the "settings" section of the WP backend.
- set the complete YT video url
- set all the other parameters as you need.
To remove the video just leave the url blank.
You can also set it by placing a shortcode in the home page via the YTPlayer shortcode window.
You can open it by clicking on the YTPlayer button in the top toolbar of the page editor.
To set a video as background of a post or a page:
Use the editor button or write the below shortcode into the content of your post or page:
[mbYTPlayer url="http://www.youtube.com/watch?v=V2rifmjZuKQ" ratio="4/3" mute="false" loop="true" showcontrols="true" opacity=1]
- @ url = the YT url of the video you want as background
- @ ratio = the aspect ratio of the video 4/3 or 16/9
- @ mute = a boolean to mute the video
- @ loop = a boolean to loop the video on its end
- @ showcontrols = a boolean to show or hide controls and progression of the video
- @ opacity = a value from 0 to 1 that set the opacity of the background video
- @ id = The ID of the element in the DOM where you want to target the player (default is the BODY)
- @ quality:
- small: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.
- medium: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).
- large: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).
- hd720: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).
- hd1080: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).
- highres: Player height is greater than 1080px, which means that the player's aspect ratio is greater than 1920px by 1080px.
- default: YouTube selects the appropriate playback quality.
What about mobile
Adding a background image to the body as mobile devices fallback is a good practice and it will also prevent unwanted white flickering on desktop browsers when the video is buffering.