Clever Geek Handbook

Embed YouTube in IFrame

I have attached a YouTube video with the following link to the Magento site (Magento is not very important unless there is a plugin I don't know about)

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

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

+3


source to share


3 answers


try this clean way css

:

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


if it doesn't work try this

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

+3


source


To specifically target YouTube videos and not all frames or attachments, you can use an attribute selector based on the string present in src

.

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


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

0


source


There are many tips on the Internet with suggestions to remove the "width" and "height" attributes, which in some cases is not possible. But user can override these attributes with CSS

.wrapper {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%; }

And iframe:

.wrapper iframe[width][height] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; }

Note the [width] and [height] in the CSS selector and the "! Important" statements - they are required to override the iframe's width and height attributes.

0


source






More articles:


All Articles