Project

General

Profile

Issue #9110

Request: Implement CSS/Javascript to dynamically scale iframe elements for videos

Added by MayImilae over 5 years ago. Updated over 5 years ago.

Status:
New
Priority:
Normal
Assignee:
-
Target version:
-
% Done:

0%


Description

Currently, Youtube videos and other embedded elements like gfycats are not scalable and are fixed to a certain size. This is fine on desktops, but results in some unfortunate issues on mobile devices.

CTtLGeMUwAEcvbY.jpg

On iOS at least one can double tap the text to zoom into them, but still, that's a really weird way for it to render by default! If we could implement some sort of CSS or Javascript that could handle this, it would be the final quirk our site has that limits mobile viewing, and it would really be mobile ready!

CTtLGeMUwAEcvbY.jpg (97.5 KB) CTtLGeMUwAEcvbY.jpg Rodea article on a mobile device MayImilae, 11/20/2015 01:43 PM
5055

History

#1 Updated by MayImilae over 5 years ago

Of course this is a very common problem and I've found two standard techniques for dealing with it...

The simplest uses pure CSS. Outlined here and here and here and here

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

And then HTML in the pages to put into the wrapper.

<div class="video-container"><iframe.......></iframe></div>

And then that within a div to specify the size we want.

That technique has some problems though...

As mentioned here

  1. It requires wrapper element, so just straight up copy-and-pasting code from YouTube is out. Users will need to be a bit more saavy.
  2. If you have legacy content and are redesigning to be fluid, all old videos need HTML adjustments.
  3. All videos need to be the same aspect ratio. Otherwise they'll be forced into a different aspect ratio and you'll get the "bars". Or, you'll need a toolbox of class names you can apply to adjust it which is an additional complication.

The better option is jquery/javascript. Outlined here and here.

$(function() {

    // Find all videos
    var $allVideos = $("object, embed"),


        // The element that is fluid width
        $fluidEl = $("body");

    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {

        $(this)
            .attr('data-aspectRatio', this.height / this.width)

            // and remove the hard coded width/height
            .removeAttr('height')
            .removeAttr('width');

    });

    // When the window is resized
    // (You'll probably want to debounce this)
    $(window).resize(function() {

        var newWidth = $fluidEl.width();

        // Resize all videos according to their own aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.attr('data-aspectRatio'));

        });

    // Kick off one resize to fix all videos on page load
    }).resize();

});

It avoids all of those problems and would apply retroactively to all of our old posts, and I could still control specific sizes with divs just like images! It would definitely be the best.

Note that the above is the most advanced version of what's on here, and applies to all object and embed elements; which would let it fix our scaling problems with gfycats and scrollable text boxes too. There are simpler versions that are constrained to specific sites at that link, which might be better? I can't imagine it being a problem, unless it accidentally scales ads or something... Or if I messed up the above and didn't understand the instructions. =/

Of course, I can't apply any of these, and certainly can't fix one that's broken... It needs someone that actually understands it to implement it.

Also available in: Atom PDF