Responsive Media added via TinyMCE in SilverStripe. Using jQuery

readme.md

Responsive Media added via TinyMCE in SilverStripe. Using jQuery

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.

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%;
}