Responsive Media added via TinyMCE in SilverStripe

In SilverStripe you can add Videos within the TinyMCE Editor by using the "Insert Media" Button. In the "From the Web" tab, you can paste a URL of a resource, such as a Video hosted on Vimeo, YouTube or other video portals.

ss insert media

Videos inserted this way have a fixed size though and don't integrate nicely into responsive layouts. With some JavaScript and CSS you can progressively enhance your videos to become responsive.

JavaScript

Integrate this script into your site. It depends on jQuery.

(function ($) {
    $(function () {
        $(".media").each(function () {
            var self = $(this);
            var iframe = self.find("iframe");
            if (!iframe.length) {
                return;
            }

            var wi = iframe.prop("width");
            var he = iframe.prop("height");

            if (!wi || wi.indexOf('%') >= 0) {
                wi = iframe.width() || 16;
            }

            if (!he || he.indexOf('%') >= 0) {
                he = iframe.height() || 9;
            }

            self.addClass("media--responsive").css("paddingBottom", (100 / wi * he) + "%");
        });
    });
})(jQuery);

CSS

.media--responsive {
  height: 0;
  position: relative;
}
.media--responsive iframe {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

 

Rate this post

Post your comment

Comments

  • Jono 13/06/2017 6:14pm (6 months ago)

    You can go script-less too, as long as you're happy to use 16:9 format. Embeds are already wrapped in a `.media` div so this CSS does the trick:

    ```css
    div.media {
    position: relative;
    padding-bottom: 56.25%; // 16:9 ratio
    height: 0;
    }
    div.media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    ```

  • lerni 06/06/2017 10:57am (7 months ago)

    I tend to use... https://github.com/davatron5000/FitVids.js

RSS feed for comments on this page | RSS feed for all comments