Published: 27 September 2014

In the age of mobile first web design and development, sometimes elements of a web page can get overlooked, resulting in users experiencing a sleek website that hugs the screen of their device like a glove until they get to a video that sticks out like a sore thumb... eeyuck!!! The good news is, there are a number solutions that help to make your website fully responsive from header to footer. Allow me to show you.

Picking the Right Plugins

JoomlaWorks AllVideos Plugin

The power of Joomla!, like any other CMS, lies in the extensions, which add additional functionality. But like every choice you make with your website, you must choose wisely, young Joomla! jedi. I personally recommend AllVideos (by JoomlaWorks). AllVideos is more than what its name suggests, as it is a Swiss Army knife for Joomla! media embedding. You can use it to easily embed audio or video hosted on your Joomla! site (mov, mp4, mp3, etc.) or media from popular services like YouTube, Vimeo, SoundCloud, Vine, and many more.

This is where you need to pay close attention, as AllVideos ships with 3 templates: Classic, Framed, and Responsive. Simply choose the "Responsive" template for rendering fully responsive media players. Best of all, AllVideos is available for Joomla! 1.5, 2.5, and 3.x, so you can't go wrong!

For WordPress, I would recommend using Advanced Responsive Video Embedder, as it offers a number of embedding options (embeds via URL or shortcodes, thumbnails & lightbox, autostart, and video alignment, to name a few).

Use a Third-Party Embed Tool to Generate Responsive Code

EmbedResponsively.Com Embed Code

Basically, this method takes the URL for the media you want to embed and wraps it with inline CSS to provide a simple cut-and-paste solution. Note, using this solution requires that you use it for each embed instance, as the CSS is within the code and will not affect other embedded media.

I often recommend using EmbedResponsively.com. as the steps are quick and easy. Simply select the media source, paste the URL, and then click "Embed." It then provides a preview of the media and the embed source code for you to cut and paste.

With this solution, you must use a content editor that will allow you to enter code for the article/item, like JCE, or you can use a plugin like NoNumber's Sourcerer.

EmbedResponsively supports the following media platforms:

  • YouTube
  • Vimeo
  • Dailymotion
  • Google Maps
  • Instagram
  • Vine
  • Getty Images
  • Generic iFrame
  • Scribd (select 'Autosize')
  • SoundCloud
  • Storify
  • Twitter

Get Your Hands Dirty with a Little CSS

Window Cleaning Spray Bottle Sponge

You can use some really simple CSS to ensure your hosted embedded videos render responsively. Basically, you will need to add two selectors to your stylesheet and wrap your embed iframe with a div container. In short, this will force the embedded media to automatically expand fullwidth, hence making it... drum roll please... responsive.

CSS Code

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

HTML Code

<div class="video-container">
	<iframe width="1280" height="720" src="//www.youtube.com/embed/Qjnc0H8utks?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Source: CSS Mojo, by way of Web Designer Wall

I almost forgot to tell you... BEWARE, as I am known for tweeting and/or emailing those who fall short of web standards. It's all in the spirit of benefiting you and your viewers, as I believe we should not let errors go unchecked. It's the digital equivalent of telling someone they have spinach in between their teeth. I say this because this very article was inspired by me noticing a non-responsive video from my friends at Bang2Joom. They have since made the video in their blog post responsive and were most appreciative of me informing them.

I think I'm done. Now, it's your turn to... "show me what you've got." Share your responsive embed successes and horror stories, or simply post a tool that you find awesome and that can help others keep things fluid. So, until my next post... stay responsive. :-)

Subscribe to the Podcast

Subscribe to Newsletter

Stay up to date with the latest Joomla news, design, development, marketing and management hints and tips right in your email.

Sub Category Topics Menu

Recent Comments

This site is hosted on

Digital Ocean

Simple Cloud Hosting, Built for Developers.

 

If you don't know how to build
your own server, we recommend

 siteground logo

Fast support, reliable & cost effective

Web Hosting