Freature: responsive design for youTube

[berndporr]

I have a page with a lot of youTube clips: https://biosignals.berndporr.me.uk/doku.php?id=ecg:gndamp and the problem has been that the clips were too large on the phone and too small on a PC screen. I just had a look at the code and the width are hard coded into it.

Suggestion: instead of hard coding the width in it it would be better to do a design which automatically adjusts the width in relative units. a) for a PC the width about 80% of the screen b) for a mobile about 99% of the screen Below this is just a "hack" where basically changes the geometry of the iframe so that it has full width on a mobile and then 80% width on a PC. All that embedded into a div.

.scalewrapper {
    padding: 1%
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 */
@media (min-width: 40em) {
    .scalewrapper {
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 5%;
    }
}

.videowrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

iframe.vshare__none,
div.vshare__none {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:0 !important;
}

php fragment from syntax.php:

                $R->doc .= '<div class="scalewrapper"><div class="videowrapper"><iframe ';
                $R->doc .= buildAttributes(array(
                            'src' => $data['url'],
                            'class'  => 'vshare__'.$align,
                            'frameborder' => 0,
                            'scrolling' => 'no'
                           ));
                $R->doc .= '>'.hsc($data['title']).'</iframe></div></div>';

Basically the iframe is positioned in absolute coordinate system within a div which has fake padding of the right size. Then that's wapped in a div for padding of that div which is then device dependent. I'm sure it can be simplified but as a hack it's OK for now. Happy to do a proper pull request at some point if there is appetite.

[fibinicci]

This is an old post but I would like to know if anything as changed since? I just started using the pluging and I have the same probleme: too large on the phone and not responsively adjusting. Any progress since your post? thanks

[sergey-nikitin]

Thanks! Very usefull!

[splitbrain]

full and half can now be used as sizes. They will automatically adjust to the available screen width.