Responsive video embedding in your WordPress site

So you’ve made the move to a responsive web site! Sadly a lot of the embedding functionality offered by media websites only offer fixed width embed options. YouTube, Vimeo and more only offer fixed size embedding.

Fortunately this is quite easy to work around with a small CSS modification and a simple wrapper div element around your embedded iframe or object, and below I’ll give you a quick run down of the HTML and CSS changes needed to have a lovely responsive video or other media in your website’s posts.

Embedding in WordPress post

First switch your post editor to ‘Text’ mode so we can paste in code without TinyMCE (the framework that powers the WordPress editor) sanitising the code we’re posting.

Now, looking at Vimeo as an example, here’s the sort of code they’ll offer as an embed code.

<iframe src="//player.vimeo.com/video/26916804?byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

We’re just going to make a minor modification of this by wrapping it in a div element with a class of “responsive-embed-container”.

<div class="responsive-embed-container">
    <iframe src="//player.vimeo.com/video/26916804?byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS

Now we have to add some code to your site’s CSS. This will vary depending on how your site is setup.

If you’re using self-hosted WordPress and have your own theme, or know how to edit your CSS, you can directly modify your theme’s CSS stylesheet (usually found at /wp-content/themes/your-theme-name/style.css).

Alternatively you can use your theme’s customisation options. This will vary from theme to theme, but you should find an option to add Custom CSS either in Appearance > Customise or in your theme’s custom settings.

So, wherever you need to make the changes, add the following simple CSS declarations.

.responsive-embed-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.responsive-embed-container iframe,
.responsive-embed-container object,
.responsive-embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

That’s it!

That’s all it takes, you’ll now have responsive media embedded in your site. And this works for a wide range of different media services, such as YouTube, Mix Cloud and so on.

Once you have the CSS saved and you want to embed from a source that doesn’t offer a ‘responsive’ option, you can just wrap the iframe/object/embed element in a <div class="responsive-embed-container"> and know it will be responsive.

Any questions, let me know in the comments, otherwise happy embedding, and enjoy the little responsive video embed below!

Other Spectacular Shows!

Comments