While creating an appealing web page or site, there are instances where the developer needs to append background video(s) to enhance the interface of the site. Also, a relevant video from YouTube can be integrated to improve the end-user’s understanding of the content.
How to Create Responsive Background Video in HTML CSS?
A responsive background video can be added from the system collection as well as a YouTube video can be added in HTML CSS via the “<video>” tag or the “<iframe>” tag.
This article covers the following aspects:
Example 1: Creating a Responsive Background Video in HTML CSS
This example creates a responsive background video from the system collection. Let’s have a look at the code.
HTML Code
First, go through the following HTML code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="backvideo">
<video id="vid" src="F:\IPHONE 6 STUFF\vis.MOV" autoplay muted loop></video>
<h2 id="content">This is a background video!</h2>
</div>
</body>
</html>
In this code, specify the “<video>” tag that incorporates a video from the system collection using the “src” attribute and includes a heading. The “autoplay” attribute allows the video to automatically start playing.
CSS Code
Now, proceed to the below-stated code lines:
#backvideo {
position: relative; }
#vid, #content {
position: absolute;
width: 150%;
}
#vid { z-index: 1; }
#content { z-index: 2; }
#backvideo { max-width: 600px; }
#content { padding: 10px; }
</style>
Here, adjust the position and width of the included video using the “position” and “width” attributes etc.
Output
Example 2: Creating a Responsive YouTube Background Video
This example creates a responsive YouTube background video instead. To do so, first, copy the entire embedded code (comprising within the “<iframe>” tag) of the target YouTube video from the video’s share option and opt for “Copy”, as follows:
HTML Code
Consider the below-provided HTML code first:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<h2 id="head">This is a background Youtube Video!</h2>
</head>
<body>
<div id="backvideo">
<iframe width="560" height="500" src="https://www.youtube.com/embed/cYvOzDZN_CU?si=NKT_7o695m8aH9gt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</body>
</html>
In this code, specify the heading via the “<h2>” tag and include the embedded copied code within the “<iframe>” tag to append the background YouTube video.
CSS Code
Now, overview the below-stated code:
#backvideo {
position: absolute;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#vid, #head { position: absolute; }
#vid {
z-index: 1; top: 0; left: 0;
width: 100%; height: 100%;
}
#head {
z-index: 2; bottom: 0; left: 0;
}
* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
#head {
padding: 10px;
color: #fff;
background: rgba(0, 0, 0 , 0.5);
}
</style>
In this code block, style the background YouTube video and the included heading using the “position”, “height”, and “width” attributes, etc.
Output
Conclusion
A responsive background video can be added from the system collection as well as a YouTube video can be added in HTML CSS via the “<video>” tag or the “<iframe>” tag. The former tag appends the background video from the system collection while the latter tag incorporates a YouTube background video. This guide has provided detailed information about creating responsive background videos in HTML CSS.
