Home › Forums › CSS › Help with tumblr’s video block CSS › Re: Help with tumblr’s video block CSS
Unfortunately there’s no real easy way to do this with CSS. In our themes we generally use some simple jQuery:
function resizeVideo(newPosts) {
var videos;
if( newPosts === undefined ) {
videos = $(“#blog #posts article.type-video”);
} else {
videos = $(newPosts).filter(‘.type-video’); // infinite scroll has kicked in
}
videos.each( function() {
var video = $(this).find(“.video iframe, .video embed”);
video.css({opacity: 0});
// resize video to 460px and retain aspect ratio
var videoHeight = video.height()
var videoWidth = video.width();
var videoRatio = (videoHeight / videoWidth);
var newWidth = 460;
var newHeight = Math.floor(newWidth*videoRatio);
video
.removeAttr(‘height width’)
.width(“100%”)
.height(newHeight)
.css(‘opacity’,1);
$(this).find(‘.tumblr_video_container’).height(newHeight).width(‘100%’);
});
} // end resizeVideo
On page load it gets called like this:
resizeVideo();
Then when infinite scroll gets kicked in it gets called like this:
resizeVideo(newElements);
Obviously you’d need to change a few of these things to get it up and running. Simple CSS changes aren’t going to properly alter the iframes, I’m afraid.