Use youtube video embed code in responsive websites

Many peoples use the internet in their smartphones and tablets. So it is important to create website responsive. Use youtube video embed code in responsive websites, we want to explain about responsive designs and HTML. The concept responsive webdesign is now firmly established as the best way to create a website for mobile users . Through this concept all website is flexible with different screens.

You can used following simple CSS and HTML for that.

Write CSS

.youtube-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px; height: 0; overflow: hidden;

}




.youtube-container iframe,

.youtube-container object,

.youtube-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}




Write HTML




<div>

<iframe width="560" height="315" src="//www.youtube.com/watch?v=znK652H6yQM" frameborder="0" allowfullscreen></iframe>

</div>




At above example the class “youtube-container” using in embed div and css. It will automatically resize with all mobile devices.