Created
August 3, 2010 14:36
-
-
Save sstarr/506478 to your computer and use it in GitHub Desktop.
Tumblr only allows a maximum width of 500px for embedded YouTube videos. Paste this script into your theme, change contentWidth and the embed code will be updated accordingly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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&color1=0xeeeeee&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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment