Responsive MIT TechTV video embeds

Category: 

  • Tip / Idea

Here are the steps that worked for me in making MIT TechTV video embeds responsive, based on the fact that TechTV will pull in a stylesheet from your site using the "Provide your own stylesheet" option.

Your first step is to create the stylesheet to be used in CSS Injector:

  1. Go to Configuration > CSS Injector (admin/config/development/css-injector).
  2. Create a new rule and add the following code:

    .video-player {
    height:100%;
    width:100%;
    }
  3. Save the new rule and note down the url. For example, if your site is mysite.mit.edu and the CSS Injector rule is css_injector_6.css, the url will be http://mysite.mit.edu/sites/default/files/css_injector/css_injector_6.css for a non-SSL site or https://mysite.mit.edu/sites/default/files/css_injector/css_injector_6.css for an SSL site. If your site will be viewed in both http and https, remove the protocol specification and use //mysite.mit.edu/sites/default/files/css_injector/css_injector_6.css. Doing so allows the browser to load the embed based on whether or not the user is viewing the secure version of the site. I'll refer to this url later as <VideoPlayer CSS URL>.

Next, go to TechTV and get your embed code:

  1. Find your video on TechTV.
  2. Click on the "Embed" link beneath the video.
  3. Choose a player size and optionally enable auto play or include comments.
  4. In the "Provide your own stylesheet" URL field, enter your <VideoPlayer CSS URL> from above.
  5. Copy the resulting code from the Copy HTML Code box.

Step three: insert the video into a page on your site:

  1. In your node editing screen, make sure the Text format is set to "Full HTML" or a custom format that supports raw HTML.
  2. If you're using the WYSIWYG editor, place your cursor in the location you wish the video to appear, then click on "Switch to plain text editor".
  3. Paste your video embed code into the node.
  4. Find the string beginning with src="http://techtv.mit.edu/embeds... and like the CSS Injector url from above, update according to whether you'll be using the secure version of the site.
  5. Wrap the embedded iframe with <div class="video-container"></div> (You can use another class of your choice or add additional classes/styles, but this is how I'll refer to the class in the final step below).

Final step: add responsive CSS

  1. Go to Configuration > CSS Injector (admin/config/development/css-injector) and either add or create a rule for your responsive stylesheet.
  2. Add the following code:

    .video-container {
    position: relative;
    height: 0;
    overflow: hidden;
    }
    .video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    }
  3. You'll also likely want to add some padding to .video-container according to how your site looks and behaves.

And you're done! After testing, please add any corrections or comments here.

11/14/14