Responsiveness is the new trend in WordPress Theme Industry,Nobody likes to maintain a separate plugin or separate theme for presenting your site in mobile devices.

Though all most every WordPress theme now comes with a mobile responsive design but you cannot guarantee that it is also optimized for displaying iFrame embeds such as the Youtube videos.

Making Embedded Videos responsive

Paste the following code in your current themes style.css file

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

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}

Now whenever you embed a video add the div tag with class .video-container.

<div class="video-container"> Video Embed code </div>

For example embedding a youtube video

<div class="video-container"> 
<iframe width="560" height="315" src="http://www.youtube.com/embed/S95J5BowMmk" frameborder="0" allowfullscreen></iframe> 
</div>

Here you can check the demo.

In title I just mentioned Youtube videos but actually you use it on any embeds such as Vimeo Video embeds,Slideshare etc.

If you prefer plugins rather than modifying theme then use Advanced Responsive Video Embedder or Fluid Video Embeds

via Webdesignerwall

Comments

  1. says

    Sorry but it adds too much bottom padding under the video.
    Is there some CSS to fix this, as when I remove it, it closes the video container.
    I have tried adding a min-height to the video container but that doesn’t work

    any suggestions – thanks Jodi

  2. Daniel H says

    I had to switch the position values between .video-container and .video-container iframe, .video-container object, .video-container embed. Otherwise the video was taking up the entire screen. Why would that be? Everywhere I have looked, everyone uses the exact same code. I feel like I’m the only one this has not worked for. My CSS looks like this:

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

    The YouTube video shortcode link in WordPress is wrapped in http://youtu.be/Aa8cTLIfJKc

    I also tried it with the full embeded link:

    Neither worked until I made the switched absolute for relative and viceversa. ny ideas why this is just me?

  3. says

    Thank you, i was looking for a way to make my YouTube video embeds responsive and applying the css from your post solved my problem.

  4. mark taylor says

    sort of makes videos responsive, well the box resizes but you lose the play button and cannot watch the vid properly, still good try though

  5. says

    Hey, Great Post Vivek! useful for responsive web designers.
    Even Mobile Responsive is the becoming first requirement of all users, even many of them is respectively moving to this new technology.

    -Mike

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge