To get started, simply paste the code below near the opening <body> tag of your web template. You should also replace the ID with the actual video ID of the YouTube video that you would like to use in the background.
<div style="position: fixed; z-index: -99; width: 100%; height: 100%"> <iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1"> </iframe> </div> // Replace ID with the actual ID of your YouTube video
Internally, we are using YouTube’s IFRAME tags to embed that video such that it occupies the entire page (both width and height are set to 100%). Also, the z-index is set to negative so the YouTube video layer will appear several levels below the main content of your page.
The downside is that your background video won’t work on mobile devices and it is not possible to mute the sound of a video without using JavaScript.
Embed Background Music with YouTube Audio
The trick is that you embed a regular YouTube video (with autoplay=1) and set the height & width of the video player to zero so the embedded IFRAME element stays invisible. This can be achieved with a single line of code that you can add anywhere on your web page.
<embed height="0" width="0"src="http://youtube.googleapis.com/v/VIDEO_ID&autoplay=1&loop=1" />
0 comments:
Post a Comment