Youtube Embedded video on different media

Question

I'm trying to create a Youtube Embedded video on my responsive website. Since I am using 3 media screen ( for phone, tablet and pc/laptop ). The problem is when I embed this code

<iframe width="560" height="315" src="//www.youtube.com/embed/kHqY2Bkva7A?rel=0" frameborder="0" allowfullscreen></iframe>

it works well on desktop, cause the width resolution is bigger than 560. But, when I open it with phone, it becomes disaster, because the max width is 480.

Anyone could help to solve this problem? Can I make the youtube embedded video responsive aswell ?

Thank you before

What happens if you put it in a "responsive" div and remove the with and hight from the iframe tag? Shouldn't it follow it's parent? — Severin, Dec 01 '13 at 16:13
Possible duplicate: http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width — Dejan Pekter, Dec 01 '13 at 16:15

score 0 · Answer 1 · answered Oct 17 '19 at 03:14

CSS:

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


.iframe-parent-div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

add 'iframe-parent-div' class to the parent div of the iframe tag

Youtube Embedded video on different media

1 Answers1