How To Play Youtube Video As Background Of Website
You are probably using a still epitome every bit the background for your website but information technology may offer a richer and more impressive feel if yous could consider placing moving images, similar an animation or an automobile-playing video clip, in the background of your web pages.
The Bing homepage often uses video backgrounds, like those penguins jumping out of an ice pigsty one later on another, and it takes few lines of code to embed video backgrounds in your web pages.
In that location are several approaches here:
- Bing uses the standard HTML5
<video>tags to serve videos on the homepage. The embedded video has a stock-still size and it doesn't resize itself with the browser. - There are fix-to-employ jQuery plugins, Tubular and BigVideo.js for example, that let you easily use any video, or a series of videos, equally page backgrounds.
- The other more simple approach, every bit you tin see in this demo, uses HTML and CSS tags (no JavaScript) to aid y'all place any YouTube video in the page background.
YouTube Video Backgrounds
To become started, simply paste the code beneath near the opening <body> tag of your web template. You should also replace the ID with the bodily video ID of the YouTube video that y'all would like to use in the groundwork.
<div style = " position : fixed; z-index : -99; width : 100%; height : 100% " > <iframe frameborder = "0" pinnacle = "100%" width = "100%" src = "https://youtube.com/embed/ID?autoplay=i&controls=0&showinfo=0&autohide=ane" > </iframe > </div > // Replace ID with the actual ID of your YouTube video Internally, nosotros are using YouTube's IFRAME tags to embed that video such that information technology occupies the unabridged page (both width and superlative are set up to 100%). Also, the z-index is gear up to negative and then the YouTube video layer volition appear several levels below the master content of your folio.
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
Remember the Geocities era when websites would automatically play background music as soon as you opened them much to the embarrassment of role workers. They generally used raw audio files, like MP3, WAV or even the MIDI format, to embed music but you lot can even utilise whatever of your favorite YouTube tracks for embedding background audio.
The trick is that you embed a regular YouTube video (with autoplay=one) and ready the height & width of the video role player to zero and so the embedded IFRAME element stays invisible. This can exist achieved with a single line of code that y'all can add together anywhere on your web folio.
<embed elevation="0" width="0" src="http://youtube.googleapis.com/v/VIDEO_ID&autoplay=i&loop=i" /> Source: https://www.labnol.org/internet/youtube-video-background/27933/#:~:text=The%20trick%20is%20that%20you,anywhere%20on%20your%20web%20page.
Posted by: suggsopme1984.blogspot.com
0 Response to "How To Play Youtube Video As Background Of Website"
Post a Comment