CODEWITHSUNDEEP
javascriptjqueryvideowidth
James Charless Dickinson
James Charless Dickinson

Reputation: 446

jQuery changing the size of Video players

James here. I'm working on a project (actually two projects that both require the same code) that deals with posts, except the content is always 100% of the users screen, and uses jquery to divide the width to make the same amount of columns no matter what screen resolution. I'm having a trouble with video posts however. If anyone could help me write (or write, that'd be way more helpful) a script that forces a default 500px video to the width of the posts? The script that I'm using to divide posts is as follows. Any answers at ALL would be helpful. Oh and I'm bumping this because it's almost a week old, and I have still not received a working script.

    var container = function(){
    var posts = $(document).width() - 40;
    var entry = (posts - 200) / 5;
    $("#posts").css("width", posts);
    $(".entry").css("width", entry);
    $("img.photo").css("width", entry - 22);
}

container();

The site I'm doing this on is http://jamestestblog5.tumblr.com Thank you to anyone who can help with this, it's REALLY bothering me!

Upvotes: 0

Views: 1176

Answers (1)

Tats_innit
Tats_innit

Reputation: 34107

Hiya please see demo here : http://jsfiddle.net/ytcAk/

you can read the logic when you click grow button.

fork from old solution. :) (please let me know if this is what you are looking for if not I will remove this post)

Jquery code

function increaseVideoSize() {
    var columnWidth = 450; // width of your content column - any
    var defaultVideoWidth = 400; // theme tag width - 400,500
    var increaseRatio = columnWidth/defaultVideoWidth;
    $(".video-post").each(function() {
        var iframe = $("iframe", this);
        if(iframe.length>0) {
            var currHeight = iframe.height();
            var newHeight = currHeight * increaseRatio;
            iframe.height(newHeight).width(columnWidth);
        } else {
            var object = $("object", this);
            var embed = $("embed", object);
            var currHeight = object.attr('height');
            var newHeight = currHeight * increaseRatio;
            object.width(columnWidth).attr('height', newHeight);
            embed.width(columnWidth).attr('height', newHeight);
        };
    });
};​

Upvotes: 1

Related Questions