Responsive gallery with images and YouTube embeds aspect ratio - html

Question

This is a tricky question to word correctly, so I created a Fiddle to more accurately represent what I'm trying to do:
http://jsfiddle.net/LAtPJ/
.thumbnailContainer.video_embed
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The above code works perfectly for very nice, responsive YouTube videos. But...
If you imagine this in the context of a media gallery where images and videos should co-exist in a completely responsive design.
There will be rows and rows of media, and there is likely to be a difference in aspect ratio between the images and the videos and so therefore we're left with something that is no longer uniform.
Effectively, the YouTube video should be 100% wide, but it's height should be no taller and no shorter than that of the images. I previously had a version of this that was all fixed widths and heights so quite simply every image and every iframe was 200 x 200. Now, I want something more mobile friendly so although images I have exactly how I need them, videos are not.
Any ideas?
The end solution (if there is one) should preferably be CSS only and not necessarily specific to YouTube (some of the videos will be other services, but mostly rendered via an iframe like YouTube).
You guys are awesome so hopefully you'll come up with something cool. Thank you so much.

Answer 1

100% height is challenging, as you can see here: How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?
Your best bet might be to use jQuery, if that's an option.

Answer 2

You might try giving both the .thumbnailContainer and .thumbnailContainer.video_embed iframe classes a min- and max-height. This is untested on mobile, of course, and I'm not certain how aspect ratio would be affected for non-responsive video embeds. Hope this helps.
DEMO here. Code snippet below:
.thumbnailContainer
{
overflow: hidden;
position: relative;
width: 100%;
min-height: 200px;
max-height: 200px;
}
.thumbnailContainer.video_embed iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 200px;
max-height: 200px;
}

Answer 3

I thought it might be useful to document how I've decided to do this.
#ivarPrudnikov kindly suggested grabbing the YouTube thumbnails from the API. Something I had considered already, but, of course, it doesn't really matter whether the thumbnail container contains an iframe, text, or indeed an image, the same problem exists.
There's no straight forward way of keeping that container the same size as the other containers without there being an image in there of the exact aspect ratio.
There may be other ways... but I was beginning to feel they were too complicated, would be difficult to manage going forward and perhaps suffer from compatibility issues with certain browsers.
So, I've resorted to doing everything server side.
It's all written in PHP anyway, so I actually pass the YouTube video ID to a PHP script, fetch the thumbnail directly from YouTube and then I crop and resize it based on the desired thumbnail width. height and aspect ratio.
That all happens on the fly. I will more than likely implement some sort of basic caching mechanism whereby I actually save the image locally eventually.
Until then, problem solved and I thank you so much to everyone who too the time to answer and/or comment.
Much appreciated, always!
Chris

Answer 4

This is what I use. It sets the padding based on the embed width and height attribute and calculates the aspect ratio.
As long as you have 2 divs around the iframe (you can tweak for embed) and the width and height set as an attribute in the iframe, this will work.
jQuery(document).ready(function() {
jQuery('.embed-wrapper').each(function(){
dcembedheight = jQuery('iframe', this).attr( "height" );
dcembedwidth = jQuery('iframe', this).attr( "width" );
ratio = ((dcembedheight/dcembedwidth)*100).toPrecision(4) + '%';
jQuery(this).attr("style" , "max-width:"+ dcembedwidth + "px");
jQuery('.embed-container', this).css({"padding-bottom": ratio});
});
});
HTML - exclude embed-wrapper for 100% width and to only use the css in 16:9 ratio
<div class="embed-wrapper">
<div class="embed-container">
<iframe src="//giphy.com/embed/BVNbHPjIfSNOw" width="480" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
CSS - notice that the padding is set by the jquery but the css contains default 16:9 ratio padding
.embed-container {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}