Resize tumblr videos

Question

I have created a tumblr theme. Everything was working till I decided to post a video on tumblr video upload. I have a box on main page 250x196 pixels where everything goes in.

• If it is a photo, I just make it 250x196 pixels (I don't care about aspect ratio. I've used jQuery to keep aspect ratio but I didn't like the result).
• If it's a photoset I use anythingslider and create a slide.
• If it's a text post I use jquery and take the first image as a tumbnail.
• If it's a video the same as photos. I just resize the iframe. At least that's what I thought I was doing.

I also use prettyphoto as a lightbox clone for both images and videos.

So when I used tumblr upload video, I had these problems:

1. First the video didn't get the aspect ratio of the iframe i think the reason for that might be the data values for height and with the iframe is using.
2. As you can see here; for the iframe to appear, I was using the inline method. I had a hidden div which had the 500pixels version of the video. The problem is that {Video-250} and {Video-500} tumblr variables both create a div for the tumblr videos with the same id. So it takes the hidden video and moves it next to the 250 pixels version.
3. The build in lightbox of tumblr for videos had a conflict with prettyphoto. When I was clicking the full screen of the video something was wrong with the z-indexes. I didn't spend time on solving this issue because I already had so many problems.

As a workaround, What I did was this:

 <div class="media" data-embed="{JSVideoEmbed-250}" data-video="{JSVideo-250}"></div>

You can see exactly what I mean on a test blog i create with three random videos:

http://stroumfaki.tumblr.com/

But the problem with the resizing still remains. The iframe is 250x196 pixels but the contents aren't. I also don't understand why tumblr posts a javascript in the first only video. The same script it posts at the end of the page.

What I ask might be a bit hard to articulate. I hope the test blog will help you understand what I mean.

Answer 1

Try using a responsive embed - this should scale your movie to fill the container: http://webdesignerwall.com/tutorials/css-elastic-videos