Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3

Question

How do you force HTML5 iframe YouTube video to center fit, cover the full-screen window background using CSS3 HTML eventually Java?

As for example "

Answer 1

I think this is what you're 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%;}


  

This will give you a video that fills the container that it is in and will automatically scale the height too.

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