I don't suppose anyone has the code that enables a YouTube video to be embedded as a full-screen background to they? A quick google search does not render a simple answer.

 

Please advise. Thank you in advance.

I was able to find a css hack to let the YouTube video play in full-screen mode automatically using the below css, but it is to scale. What actually plays is 100% height and width is to scale. Is there anyway to have it be 100% width and height overflow is hidden (assuming controls are not needed - autoplay / loop) or simply have the video 100% width / height & not to scale?

 

<style>

#YouTube1

{

position: fixed !important;

left: 0 !important

top: 0 !important

width: 100% !important

height: 100% important

}

 

YouTube iframe

{

width: 100% !important

height: 100% !important

}

</style>

 

It doesn't exactly answer your question, but this makes a YouTube video responsive, filling the available width and preserving the aspect ratio. Note the iframe tag is modified too:

.video-responsive{

    overflow:hidden;

    padding-bottom:56.25%;

    position:relative;

    height:0;

}

.video-responsive iframe{

    left:0;

    top:0;

    height:100%;

    width:100%;

    position:absolute;

}

<div class="video-responsive"><iframe style="display: block; margin-left: auto; margin-right: auto;" src="//www.youtube.com/embed/bLZWTkNyZFo?autoplay=1" width="853" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>