How to add youtube video as website background

Few days back i have posted tutorial about playing mp4, mpeg, etc full screen video in background using html5, Now in this tutorial i’ll show you How to add youtube video as website background, Youtube is the best platform for hosting your video because it’ll automatically adjust video resolution according to user’s internet bandwidth, So that user can also play youtube video in slow internet connection with less buffering.



If you have created any video for your website or business presentation. then you can add that videos as website background to make your website more dynamic.
play-youtube-video-as-website-background
Here is the code for playing youtube video as background.

<div style="height:600px; overflow:hidden;"> 
<iframe style="width:100%; height:700px;" frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/YOUTUBE_VIDEO_ID?autoplay=1&controls=0&showinfo=0&autohide=1&modestbranding=1&;disablekb=1">
</iframe>
</div>

You can get the your youtube video embed code directory from youtube or just replace your youtube video id on above code. Add some style sheet to play video as background. You can also hide youtube logo using css tricks.



See live demo and download source code.

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.