Tumblr Vimeo Video Hack

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"></script>
  <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 = youtubeCo开发者_运维问答de.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.

Here is an updated version of this script which seem to combine the best of both

<!--Better Vimeo Embeds on Tumblr by Matthew Buchanan http://matthewbuchanan.name/141302328
    Updated by Alex Hallajian http://journal.alexhallajian.com/post/1153909350
    Tweaked by UnAmazing to remove portrait & title info and fix color http://unamazing.com -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var color = "55AAAA";
    var opts = "title=0&byline=0&portrait=0";
    $("iframe").each(function() {
        var $obj = $(this);
        var data = $obj.attr("data");
        var vsrc = $obj.attr("src");
        var oldW = $obj.attr("width");
        var newW = 600;
        var oldH = $obj.attr("height");
        var p = oldW/newW;
        var newH = (oldH / p);
        if (vsrc.search("vimeo") > 0) {
            $obj.replaceWith("<iframe src='"+vsrc+"?"+opts+"&color="+color+"' width='"+newW+"' height='"+newH+"' frameborder='0'></iframe>");
        }
    });
})
</script>

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