{"id":6048,"date":"2021-07-12T02:00:00","date_gmt":"2021-07-12T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/how-to-create-a-youtube-video-background-with-css\/"},"modified":"2024-02-08T00:31:43","modified_gmt":"2024-02-07T23:31:43","slug":"how-to-create-a-youtube-video-background-with-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/how-to-create-a-youtube-video-background-with-css\/","title":{"rendered":"How to create a YouTube video background with CSS"},"content":{"rendered":"\n

Using an embedded YouTube video as a background is a common technique in nowadays websites. You can use the HTML5 video tag to create a background video<\/a>. However, that would mean hosting a video online somewhere. And I don\u2019t know you, but in my case, I always try to avoid that option. Youtube video embeds are a good alternative to self-hosted videos. They save bandwidth and they load super fast. But, since they are in an iframe<\/code>, they can be a bit more tricky to deal with. In this tutorial, we’ll be going over how to create a YouTube video background for our website.<\/p>\n\n\n

Getting the HTML for the embedded Youtube video<\/h2>\n\n\n

The first thing we have to do is grabbing the embed code of the YouTube video that we want to display in the background. Just go to your chosen video and click on the \u201cshare\u201d button.<\/p>\n\n\n\n

\"YouTube<\/figure>\n\n\n\n

Several options will pop up. Click on the \u201cembed\u201d one.<\/p>\n\n\n\n

\"YouTube<\/figure>\n\n\n\n

This will open up a new box on your screen with the code for the video you want to embed. Disable the \u201cShow player controls\u201d in the embed options and then click on the \u201ccopy\u201d button.<\/p>\n\n\n\n

\"YouTube<\/figure>\n\n\n\n

Now create a div<\/code> container and paste there your embed code.<\/p>\n\n\n

<div<\/span> class<\/span>=\"video-container\"<\/span>><\/span>\n  <iframe<\/span> width<\/span>=\"560\"<\/span> height<\/span>=\"315\"<\/span> src<\/span>=\"https:\/\/www.youtube-nocookie.com\/embed\/Yj2iELI6OeI?controls=0\"<\/span> title<\/span>=\"YouTube video player\"<\/span> frameborder<\/span>=\"0\"<\/span> allow<\/span>=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"<\/span> allowfullscreen<\/span>><\/span><\/iframe<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
We will remove all the unnecessary properties, which are all except controls=0<\/code>  (the  width<\/code> and height<\/code> properties also have to be removed) Finally we will add two extra properties: autoplay=1<\/code>, mute=1<\/code> and playsinline=1<\/code>.<\/p>\n\n\n
<div<\/span> class<\/span>=\"video-container\"<\/span>><\/span>\n  <iframe<\/span> src<\/span>=\"https:\/\/www.youtube.com\/embed\/Yj2iELI6OeI?&autoplay=1&mute=1&playsinline=1\"<\/span>><\/span><\/iframe<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The final result is a video-container<\/code> div that has an iframe<\/code> which contains the source of the YouTube video. This video will autoplay on mute when one of our users visits our webpage.<\/p>\n\n\n
Centering the YouTube video background with CSS<\/h2>\n\n\n
To make the iframe<\/code> a fullpage YouTube video background we’ll be applying some CSS properties to the parent video-container<\/code> as well as the iframe<\/code>:<\/p>\n\n\n
.video-container<\/span>{\n  width<\/span>: 100vw<\/span>;\n  height<\/span>: 100vh<\/span>;\n}\n    \niframe<\/span> {\n  position<\/span>: absolute;\n  top<\/span>: 50%<\/span>;\n  left<\/span>: 50%<\/span>;\n  width<\/span>: 100vw<\/span>;\n  height<\/span>: 100vh<\/span>;\n  transform<\/span>: translate<\/span>(-50%<\/span>, -50%<\/span>);\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The CSS properties applied on the parent container scale it 100% of the screen viewport’s height and width. The iframe<\/code> which is inside is also scaled to 100% of the screen viewport’s height and width.<\/p>\n\n\n\n
The iframe<\/code> will have an absolute position that will allow us to position the iframe<\/code> exactly where we want it. In this case, it’s placed on top of the parent container. The positioning attributes top<\/code> and left<\/code> are used to set the location of the upper left corner of the iframe<\/code> in the center of the screen.<\/p>\n\n\n\n
To get our YouTube video background centered, we use transform<\/code> to apply a negative top margin of half the video’s height, and a negative left margin of half the video’s width. This will offset the iframe<\/code> relative to the element (not the parent container) centering the YouTube video background vertically and horizontally.<\/p>\n\n\n
Making our video fullscreen<\/h2>\n\n\n
As you can see now, our YouTube video is placed in the center of the screen but it has not been scaled to be the full width of our website. To do we so will use the aspect-ratio<\/code> media feature:<\/p>\n\n\n
@media<\/span> (min-aspect-ratio:<\/span> 16<\/span>\/9<\/span>) {\n  .video-container<\/span> iframe<\/span> {\n    \/* height = 100 * (9 \/ 16) = 56.25 *\/<\/span>\n    height<\/span>: 56.25vw<\/span>;\n  }\n}\n    \n@media<\/span> (max-aspect-ratio:<\/span> 16<\/span>\/9<\/span>) {\n  .video-container<\/span> iframe<\/span> {\n    \/* width = 100 \/ (9 \/ 16) = 177.777777 *\/<\/span>\n    width<\/span>: 177.78vh<\/span>;\n  }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The aspect ratio is the width to height ratio of the viewport. 16<\/strong>:9<\/strong> denotes a width of 16 units and a height of 9 units. 16:9 is the standard widescreen aspect ratio that is used on the web. Generally, most videos are shot in this aspect ratio.
\nThe 16:9 aspect ratio corresponds to 56.25 of the viewport’s height and 177.78 of the viewport’s width. To create a 16:9 ratio, we must divide 9 by 16 (0.5625 or 56.25%). This allows the browser to determine the video’s dimensions based on the width of its parent container. This will maintain the aspect ratio of the Youtube video as it scales to fit the background of the webpage.<\/p>\n\n\n
Adding overlay text on top of our video<\/h2>\n\n\n
The text to be displayed over our background Youtube video is put inside a separate div<\/code> like so:<\/p>\n\n\n
<div<\/span> id<\/span>=\"text\"<\/span>><\/span>    \n  <h1<\/span>><\/span>Use a youtube video as a full screen background with CSS<\/h1<\/span>><\/span>\n<\/div<\/span>><\/span> \n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The CSS is applied on the text<\/code> div to move it along with any of its contents on top of the video:<\/p>\n\n\n
#text<\/span>{\n  position<\/span>: absolute;\n  color<\/span>: #FFFFFF<\/span>;\n  left<\/span>: 50%<\/span>;\n  top<\/span>: 50%<\/span>;\n  transform<\/span>: translate<\/span>(-50%<\/span>, -50%<\/span>);\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
We have applied the same CSS properties as we did on the iframe<\/code> to center the text-div<\/code> in the center of our webpage. You’ll want to make sure that the text which is placed on top of our YouTube video background has high contrast so that it can easily be read.<\/p>\n\n\n\n
Adding the Youtube embedded loop option<\/h2>\n\n\n
If you use a short video you’ll notice how the related videos show once the video is finished. To avoid this we have to use a little trick. Adding the parameter loop=1<\/code> to the source of the video is no longer enough, we have to add more parameter and this is the playlist<\/code> one to which we will assign the ID of the youtube video.<\/p>\n\n\n\n
So, if we have this video<\/a> we should look for its id, which is the code after the \/embed\/<\/code> part or after ?v=<\/code> when accessing the video throught youtube. Then, we simply paste it on our playlist<\/code> param:<\/p>\n\n\n
&playlist=Yj2iELI6OeI&loop=1\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Our final embedded video shoul look like this:<\/p>\n\n\n
 <iframe<\/span> src<\/span>=\"https:\/\/www.youtube.com\/embed\/Yj2iELI6OeI?controls=0&autoplay=1&mute=1&playsinline=1&playlist=Yj2iELI6OeI&loop=1\"<\/span>><\/span>\n <\/iframe<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
Result<\/h2>\n\n\n
And here’s the result: a beautifull full-screen video using Youtube!<\/p>\n\n\n\n
You can also place other elements such as hover buttons<\/a> and use the same CSS properties to place them on top of our YouTube video background.<\/p>\n\n\n
Notice how the parameter playsinline<\/code> is required in order to play inline videos in iOS and other mobile devices. More on the Youtube IFrame Player API<\/a>.<\/p>\n\n\n\n