Skip to content

Instantly share code, notes, and snippets.

@sstarr
Created August 3, 2010 14:36
Show Gist options
  • Save sstarr/506478 to your computer and use it in GitHub Desktop.
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.
<!-- 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 = 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