How To Embedded Video Responsive Fullscreen In Html Youtube
Using an embedded YouTube video as a background is a common technique in nowadays websites. You tin can utilize the HTML5 video tag to create a groundwork video. Nevertheless, that would mean hosting a video online somewhere. And I don't know you, but in my case, I always attempt 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, they tin can be a bit more than tricky to bargain with. In this tutorial, we'll be going over how to create a YouTube video groundwork for our website.
Getting the HTML for the embedded Youtube video
The first thing we accept to do is grabbing the embed code of the YouTube video that we want to display in the background. Just become to your chosen video and click on the "share" push button.
Several options will pop up. Click on the "embed" one.
This volition open a new box on your screen with the code for the video you want to embed. Disable the "Show actor controls" in the embed options and then click on the "copy" push button.
Now create a div container and paste there your embed code.
<div class = "video-container" >
<iframe width = "560" height = "315" src = "https://www.youtube-nocookie.com/embed/Yj2iELI6OeI?controls=0" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; moving picture-in-picture" allowfullscreen > </iframe >
</div > We will remove all the unnecessary properties, which are all except controls=0 (the width and height properties as well take to be removed) Finally we volition add 2 actress properties: autoplay=one and mute=i.
<div class = "video-container" >
<iframe src = "https://www.youtube.com/embed/Yj2iELI6OeI? &autoplay=1&mute=1" > </iframe >
</div > The terminal effect is a video-container div that has an iframe which contains the source of the YouTube video. This video volition autoplay on mute when one of our users visits our webpage.
Centering the YouTube video background with CSS
To brand the iframe a fullpage YouTube video background nosotros'll exist applying some CSS properties to the parent video-container also as the iframe:
.video-container {
width : 100vw;
elevation : 100vh;
} iframe {
position : accented;
top : 50%;
left : 50%;
width : 100vw;
height : 100vh;
transform : translate (-50%, -50%) ;
}
The CSS properties applied on the parent container calibration information technology 100% of the screen viewport'due south height and width. The iframe which is within is as well scaled to 100% of the screen viewport's height and width.
The iframe will have an absolute position that will allow the states to position the iframe exactly where nosotros desire it. In this example, it's placed on top of the parent container. The positioning attributes pinnacle and left are used to set the location of the upper left corner of the iframe in the center of the screen.
To get our YouTube video background centered, we apply transform to apply a negative elevation margin of half the video's height, and a negative left margin of half the video'south width. This will commencement the iframe relative to the element (not the parent container) centering the YouTube video background vertically and horizontally.
Making our video fullscreen
As yous can run into now, our YouTube video is placed in the center of the screen but information technology has not been scaled to exist the full width of our website. To do we then will utilise the attribute-ratio media characteristic:
@media ( min-aspect-ratio : 16/ix) {
.video-container iframe {
/* height = 100 * (9 / 16) = 56.25 */
tiptop : 56.25vw;
}
} @media ( max-attribute-ratio : xvi/ix) {
.video-container iframe {
/* width = 100 / (9 / 16) = 177.777777 */
width : 177.78vh;
}
}
The aspect ratio is the width to peak ratio of the viewport. 16:ix denotes a width of xvi units and a height of 9 units. sixteen:nine is the standard widescreen aspect ratio that is used on the spider web. Generally, most videos are shot in this aspect ratio.
The sixteen:9 attribute ratio corresponds to 56.25 of the viewport's height and 177.78 of the viewport'southward width. To create a 16:9 ratio, nosotros must separate 9 past 16 (0.5625 or 56.25%). This allows the browser to determine the video'south dimensions based on the width of its parent container. This volition maintain the aspect ratio of the Youtube video as it scales to fit the background of the webpage.
Adding overlay text on top of our video
The text to exist displayed over our groundwork Youtube video is put inside a split div like then:
<div id = "text" >
<h1 > Utilise a youtube video as a total screen background with CSS </h1 >
</div > The CSS is practical on the text div to move information technology along with whatever of its contents on summit of the video:
#text {
position : accented;
color : #FFFFFF;
left : l%;
height : l%;
transform : translate (-50%, -50%) ;
} We have practical the same CSS backdrop as we did on the iframe to center the text-div in the center of our webpage. You'll desire to make certain that the text which is placed on top of our YouTube video groundwork has loftier contrast so that it can easily be read.
You lot tin besides place other elements such as hover buttons and utilise the same CSS properties to place them on top of our YouTube video background.
Adding the Youtube embedded loop pick
If you use a brusk video you'll notice how the related videos show in one case the video is finished. To avoid this we have to use a little play a joke on. Calculation the parameter loop=1 to the source of the video is no longer enough, we take to add more parameter and this is the playlist one to which we will assign the ID of the youtube video.
And then, if nosotros take this video we should look for its id, which is the lawmaking afterwards the /embed/ function or after ?v= when accessing the video throught youtube. Then, we simply paste it on our playlist param:
&playlist=Yj2iELI6OeI&loop=ane Our final embedded video shoul wait like this:
<iframe src = "https://www.youtube.com/embed/Yj2iELI6OeI?controls=0&autoplay=ane&mute=i&playlist=Yj2iELI6OeI&loop=1" >
</iframe > Result
And here'southward the result: a beautifull total-screen video using Youtube!
Come across the Pen on CodePen.
Conclusion
Creating a YouTube video background is 1 of the simplest solutions to brand a difference and stand out from your web competitors. Users who enter your website will be immersed in a unique visual experience that will not easily forget.
This technique tin can be quite impressive with full-screen videos on websites using fullPage.js. Bank check out this fullscreen videos example!
Now that you have learned how to create a YouTube video background, it is your time to "show off"! If you plan to start a business, creating a landing page with a YouTube video background would be an like shooting fish in a barrel solution that will crusade at the aforementioned time a great impression on your possible customers. Share with us your websites when you finish. We would beloved to come across them!
Related articles:
- How to create a video background with CSS
- How to create a fullscreen video with CSS and HTML
Source: https://alvarotrigo.com/blog/how-to-create-a-youtube-video-background-with-css/
Posted by: evanscalist.blogspot.com
0 Response to "How To Embedded Video Responsive Fullscreen In Html Youtube"
Post a Comment