Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

Make a YouTube video responsive with CSS

Make a YouTube video responsive with CSS

YouTube is world’s most popular video streaming site, so if you have a responsive website and want to embed a youtube video on a page , you can just do using youtube embed code but it will not going to support your smart phone , simply its not responsive, In this video I am going to show you how to make youtube video responsive in all device using CSS code.

CSS Code to make Youtube video Responsive

.youtube{
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML code to make youtube video responsive


<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/lqoNpmmzy_0" frameborder="0" allowfullscreen></iframe>
</div>

OUTPUT

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Vishnu Recent comment authors

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

  Subscribe  
newest oldest most voted
Notify of
Vishnu
Guest
Vishnu

Thanks its Save my Life for my travel website …

Do you have any Query / Suggestion