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

    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="" frameborder="0" allowfullscreen></iframe>


Leave a Reply

1 Comment threads
0 Thread replies
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.

newest oldest most voted
Notify of

Thanks its Save my Life for my travel website …

Do you have any Query / Suggestion