Embed YouTube IFrame responsive

Question

I embedded YouTube video with the following link on a Magento site (Magento is not really important unless there is a plugin that I am not aware of)

<iframe width="640" height="360" src="http://www.youtube.com/embed/Zq-805aUM7M?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

I don't believe this piece of code is good because it is not responsive. How can I fix?

Answer 1

try this pure css way:

iframe, object, embed {
        max-width: 100%;
        max-height: 100%;
}

if that does not work try this

https://benmarshall.me/responsive-iframes/

Answer 2

To specifically target youtube videos, and not all iframes or objects of embeds, you can use attribute selector based on string present in src.

iframe[src*=youtube]
{
  max-width:100%;
  height:100%;
}

This works for me, but anyway, here you can find more solutions for additional (specific) cases