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.
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%;
}
Post your comment
Comments
Jono 13/06/2017 6:14pm (7 years 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 years ago)
I tend to use... https://github.com/davatron5000/FitVids.js
No one has commented on this page yet.
RSS feed for comments on this page | RSS feed for all comments