Make a Youtube video a full height and width cover video - html

Question

I want to use a Youtube video as a fullscreen background for a splash page (including sound). However there should be no controls, ability to pause, etc. It should just look like a background movie.
What is the best way to do this?
Should I be using the tag or is there some other HTML5 tag, or entirely different method I can use?

Answer 1

If you're ok to use JS/jQuery: http://www.seanmccambridge.com/tubular/
Also, see the source if you want to take some of the concepts: https://code.google.com/p/jquery-tubular/source/browse/trunk/js/jquery.tubular.1.0.js

Answer 2

If you want to use YT player, I recommend you to use Youtube Player API
Please keep in mind that you can make the player full-background size, but you can't stretch the video inside the player (so you will need to accept black stripes for different screen ratio than original ratio of the video). I recommend you to use html5 video player (maybe video.js can help you)
P.S.: #Besto's suggestion Tubular breaks Youtube's Terms of Services!

Answer 3

<div id="ytcon" style="overflow: hidden">
<iframe id="fullyt" src="//www.youtube.com/embed/QVr0M7WCBu4?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<script>
$("#ytcon").height($(window).height());
$("#ytcon").width($(window).width());
$("#fullyt").height($(window).height());
$("#fullyt").width($(window).width());
$(window).on('resize', function(){
$("#ytcon").height($(window).height());
$("#ytcon").width($(window).width());
$("#fullyt").height($(window).height());
$("#fullyt").width($(window).width());
});
</script>