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

  • lerni 06/06/2017 10:57am (20 days ago)

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

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