Embed Responsively: Optimize Embedded Videos for Mobile Visitors

If left unchecked, embedded videos, audio, and social posts could result in a poor mobile user experience. Non-mobile optimized media embeds can end up breaking the design of your website. Here are 3 solutions for embedding media responsively and ensuring your website looks great on mobile devices.

Use a Plugin

One key benefit of using a CMS is its ability to add functionality with the use of plugins. If you're using WordPress to power your Christian website then you have plenty of plugin options to choose from. I recommend using the Advanced Responsive Video Embedder. It's frequently updated, has received stellar ratings, and supports over 30 different video hosting platforms (Vimeo, YouTube, and Facebook to name a few).

The Free version offers all you need to embed responsively. But you might want to take a look at the Pro version for some impressive additional options that can improve your website functionality and performance. The pro features include: LazyLoad mode, click to play in lightbox, and custom video thumbnail images and titles to name a few.

For those with Joomla! you can easily embed video responsively with the plugin OSEmbed. Simply add the video URL into your content editor and the plugin does the rest.

Generate Responsive Code

For those with a fully hosted CMS platform such as Squarespace, Clover Sites, Elexio, Wix, and Ekklesia 360 you may find it easier or you may be limited to only using a copy & paste responsive solution.

In this case you can count on EmbedResponsively.com to provide responsive video code that works on every website platform. Best of all, the process is extremely easy for even the most novice website owner. Enter the video URL and click "Embed". You will receive a preview of the video and the embed code. This method wraps the standard embed code with <div> and inline CSS code for each embed instance.

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.

Modify Your Template

If you're comfortable with code, you can use the code snippets provided (HTML & CSS) to ensure your hosted embedded videos render responsively. With this code, you will need to add an additional div and iframe selector to your stylesheet and wrap your embed iframe with a div container. The code will force all embedded media housed in <div class="video-container"> to automatically expand or contract to the width of your website, thus making the embedded media responsive - Aww Yeah!!!

CSS Code

.videoContainer {
        	position: relative;
        	padding-bottom: 56.25%;
        	padding-top: 30px;
        	height: 0;
        	overflow: hidden;
}
 
.videoContainer iframe, 
.videoContainer object, 
.videoContainer embed {
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
}

HTML Code

<div class="videoContainer">
        	<iframe width="1920" height="1080" src="//vimeo.com/189643147" frameborder="0" allowfullscreen></iframe>
</div>

Additional Webmastery Tip

I found that with most audio hosting providers, audio player embed are responsive without the need for additional CSS or plugin. This goes for Soundcloud, Bandcamp, Podomatic, Reverbnation, Spreaker, Libsyn and Buzzsprout.

We're in the age of mobile first web design. Please don't let your church or organization miss out by not having a fully mobile optimized website. Use the three tips outlined in this article to ensure each and every video on your website is responsive.

So what responsive methods have you implemented on your website? Post a comment, I would love to hear your responsive embed pro tips, use cases and challenges.