Force formatting YouTube YouTube videos to the center and full screen coverage in the background using HTML5 CSS3

Question

How do you get the HTML5 iframe YouTube video to center, cover the full-screen background using CSS3 HTML in the end Java?

Like the " paypal.it " homepage background or unity3d.com/5 ", this is a youtube iframe video. iframe covers the entire screen (scaling) and covers the entire width and height when the window is resized. It resizes, keeping the width 100 % min, increasing height or 100% minimum height, increasing width.

How is this effect achieved with iframe HTML5 and CSS3?

HTML5 sample code

 <div class="video" style="opacity: 1;"> <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" style="height: 720px;"> </iframe> </div> 

CSS3 HTML code, after all, will be a useful Java aid.

Answer 1

For a real full-screen solution, this can be achieved as follows:

HTML

 <div class="video-background"> <div class="video-foreground"> <iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe> </div> </div> 

CSS

 * { box-sizing: border-box; } .video-background { background: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -99; } .video-foreground, .video-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } @media (min-aspect-ratio: 16/9) { .video-foreground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video-foreground { width: 300%; left: -100%; } } @media all and (max-width: 600px) { .vid-info { width: 50%; padding: .5rem; } .vid-info h1 { margin-bottom: .2rem; } } @media all and (max-width: 500px) { .vid-info .acronym { display: none; } } 

This is not ideal, for example. it does not work with extremum coefficients in the container, but it works for most situations. Here is a working example: https://codepen.io/anon/pen/zRVLGJ

Answer 2

I think this is what you are trying to achieve:

 .video-wrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;} .video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} <div class="video-wrapper"> <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" allowfullscreen></iframe> </div> 

This will give you a video that fills the container in which it is located and also automatically scales the height.

I initially found this solution here: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php