Tumblr Vimeo Video Hack

Question

i want to post videos from vimeo.com on tumblr.com with a width more than 500px.

it exist a code for videos from youtube.com that works. (http://pastie.org/871790)

<!-- Widescreen YouTube Embeds by Matthew Buchanan & Hayden Hunter
  http://matthewbuchanan.name/451892574
  http://blog.haydenhunter.me

  Hacked around by Simon Starr to break out of Tumblr's max width of 500px
  http://www.simonstarr.com

  Original source here: http://pastie.org/871790

  Released under a Creative Commons attribution license:
  http://creativecommons.org/licenses/by/3.0/nz/ -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
  $(function() {
    // Change this to whatever width you like
    var contentWidth = 700;

    $("object").each(function () {
      if ($(this).find("embed[src^='http://www.youtube.com']").length > 0) {
        // Identify and hide embed(s)
        var parent = $(this).parent();
        parent.css("visibility","hidden");
        var youtubeCode = parent.html();
        var params = "";
        if (youtubeCode.toLowerCase().indexOf("<param") == -1) {
          // IE doesn't return params with html(), so…
          $("param", this).each(function () {
            params += $(this).get(0).outerHTML;
          });
        }
        // Set colours in control bar to match page background
        var oldOpts = /rel=0/g;
        var newOpts = "rel=0&amp;color1=0xeeeeee&amp;color2=0xeeeeee;hd=1";
        youtubeCode = youtubeCode.replace(oldOpts, newOpts);
        if (params != "") {
          params = params.replace(oldOpts, newOpts);
          youtubeCode = youtubeCode.replace(/<embed/i, params + "<embed");
        }
        // Extract YouTube ID and calculate ideal height
        var youtubeIDParam = $(this).find("embed").attr("src");
        var youtubeIDPattern = /\/v\/([0-9A-Za-z-_]*)/;
        var youtubeID = youtubeIDParam.match(youtubeIDPattern);
        var youtubeHeight = Math.floor(contentWidth * 0.75 + 25);
        var youtubeHeightWide = Math.floor(contentWidth * 0.5625 + 25);
        // Test for widescreen aspect ratio
        $.getJSON("http://gdata.youtube.com/feeds/api/videos/" + youtubeID[1] + "?v=2&alt=json-in-script&callback=?", function (data) {
          oldHeight = /height="?([0-9]*)"?/g;
          oldWidth = /width="?([0-9]*)"?/g;

          newWidth = 'width="' + contentWidth + '"';
          if (data.entry.media$group.yt$aspectRatio != null) {
            newHeight = 'height="' + youtubeHeightWide + '"';
          } else {
            newHeight = 'height="' + youtubeHeight + '"';
          }
          youtubeCode = youtubeCode.replace(oldHeight, newHeight);
          youtubeCode = youtubeCode.replace(oldWidth, newWidth);
          if (params != "") {
            params = params.replace(oldWidth, newWidth);
            params = params.replace(oldHeight, newHeight);
            youtubeCode = youtubeCode.replace(/<embed/i, params + "<embed");
          }
          // Replace YouTube embed with new code
          parent.html(youtubeCode).css("visibility","visible");
        });
      }
    });
  });
  </script>

so, is it possible to change this code for vimeo.com?

thank you.

Answer 1

This theme here: http://www.tumblr.com/theme/8631 allows you to do just that. Ripping the code from it seems to be a little tricky though, as it seems to be integrated into a script that does some other things as well (although I don't really know what I am doing, my expertise in coding doesn't go much beyond copy and paste)

I have a video embeded on a test blog here: x-men-bike-gang.tumblr . com (sorry i had to break up the link, due to restrictions on links from new users)

I am going to keep looking for another solution, though obviously it can be done just fine.

Answer 2

So, with someone else (mostly him), I figured out how to scale vimeo embeds on tumblr, while within the same script control the embed color.

Alter for color: var color = “55AAAA”; Alter for width: var newW = 700;

Embed into your tumblr in the head (same place as where the youtube code would go)

<script type=”text/javascript”> 
$(function() {
    var color = “55AAAA”;
    $(“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 oldW = $obj.attr(“width”);
        var newW = 700;
        var oldH = $obj.attr(“height”);
        var p = ((newW - oldW) * 100)/newW;
        var newH = (oldH * parseFloat(‘1.’+p)); 
        $obj.replaceWith(
            ”<iframe src=’http://player.vimeo.com/video/”+id+
            ”?”+server+”&title=0&byline=0&portrait=0&color=”+color+”’ “+
            ”width=’”+newW+”’ height=’”+newH+”’ frameborder=’0’></iframe>”
        );
    });
})
</script>

Thanks to alex, you can follow the forum post here: http://vimeo.com/forums/topic:29292