Responsive Media with TinyMCE

One of the main issues with using WYSIWYG editors like TinyMCE or CKEditor is the lack of responsiveness in images and media. Images are easy enough to work around with a small bit of CSS, but it's not as easy when it comes to adding a YouTube video or other form of media. With a small modification to the media plugin and a few lines of CSS code, media objects can be responsive as well.

The first thing that you need to do is edit one of the TinyMCE plugin files. Locate the TinyMCE folder. Inside the folder Plugins there is one called Media. This contains a file called plugin.min.js

One of the things I noticed when using this plugin was that the media was placed within iframes. So I searched out the <iframe parts and added the following in front of it:

<div class="video-container">

The plan is to wrap the iframes that the plugin generates in a div which can then be sorted out through css, ignoring the height and width elements that the iframe applies. Once you've added the opening div, simply locate the end <iframe> and add the closing </div> to this.

There are 2 instances of an iframe creation within this file.

Then simply add the below code to your CSS file and it's done. The padding-top and bottom on the video-container class make the container perfect for YouTube videos standard sizing. If you use something bigger then just play around with these figures until you have what suits your needs. Then try it on a mobile device and look in wonderment as the video doesn't make your site horizontal scroll anymore.

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