views:

43

answers:

0

I am trying to embed videos automatically at 700px on Tumblr, but tumblr has a bad habit of controlling embed options, forcing max-500px.

I use a script by matthew buchanan which allows you to customize the embed colors http://matthewbuchanan.name/post/971857304/better-html5-vimeo-embeds

$(function() {
var color = "55cc55";
$("object[data^='http://vimeo.com']").each(function() {
    var $obj = $(this);
    var data = $obj.attr("data");
    var temp = data.split("clip_id=")[1];
    var id = temp.split("&")[0];
    var server = temp.split("&")[1];
    var w = $obj.attr("width");
    var h = $obj.attr("height");
    $obj.replaceWith(
        "<iframe src='http://player.vimeo.com/video/"+id+
        "?"+server+"&title=0&byline=0&portrait=0&color="+color+"' "+
        "width='"+w+"' height='"+h+"' frameborder='0'></iframe>"
    );
});

});

Is there any code I could add to that to that to control the embed width at the same time?

Or does any one know of any scripts that will allow you to do that?

this theme actually has working code that does this: tumblr.com/​theme/​8631 I may try to use this, although it is pretty integrated into a script that does some other things as well and won't be so neat to just try to plop it into my code.

I didn't post the whole script here, but this is the important part. The main part dealing with the video starts with "if (post.getElement('.Video')) {"

    <script type="text/javascript" charset="utf-8">
    window.addEvent('domready', function() {
        var Posts = $$('.Post');
        var PostPosition;
        var PostNumber = 0;
        var ScrollTo = new Fx.Scroll(document.body, {
                duration:200
                ,offset: {
                    'x': 0,
                    'y': -30
                }
            });
        var MaxPostNumber = Posts.length-1;
        var PhotoSetEmbeds = $$('.html_photoset embed');

        Posts.each(function(post, index, array) {
            if (post.getElement('.Words') != null) {
                var body = post.getElement('.PostBody');
                var NumberOfWords = body.get('text').split(' ').length;
                post.getElement('.WordCount').set('html', NumberOfWords);
            }

            if (post.getElement('embed.photoset')) {
                var PhotoSetEmbed = post.getElement('embed.photoset');
                PhotoSetEmbed.setProperties({
                     width: '770'
                    ,height: '771'
                });
            }

            if (post.getElement('.Video')) {
                var el = post.getElement('object') || post.getElement('iframe');
                var w = el.getProperty('width');
                var h = el.getProperty('height');
                var p = ((770 - w) * 100)/w;
                var newH = (h * ('1.'+p).toFloat()).round(); 
                el.setProperties({width:770, height:newH});**
            }
        });

This question is getting too long, but if any one has any ideas of how to either alter the first code to include some width paramaters, or make a standalone script that does this (that doesn't interfere with the first code) that would be great.