Skip to content

Instantly share code, notes, and snippets.

@bsturdivan
Created September 7, 2012 23:14
Show Gist options
  • Save bsturdivan/3670613 to your computer and use it in GitHub Desktop.
Save bsturdivan/3670613 to your computer and use it in GitHub Desktop.
Resize iframe
define(['jquery', 'utils'], function($, utils) {
$.widget( 'cbsi.videoResize', {
options: {
maxwidth: 480
},
_create: function() {
this.selectors = [
"iframe[src^='http://player.vimeo.com']",
"iframe[src^='http://www.youtube.com']",
"iframe[src^='https://www.youtube.com']",
"iframe[src^='http://www.kickstarter.com']",
"iframe[class='video-player-frame']",
"iframe[src^='http://altfarm.mediaplex.com']",
"object",
"embed"
];
this.$container = $('<div/>').css({
padding: 0,
position: 'relative',
width: '100%'
});
this._resizeVideo();
},
_resizeVideo: function() {
var videoObjects = this.element.find(this.selectors.join(',')),
numVideos = videoObjects.length,
aspectRatio,
$video,
bodyPos,
newEl;
for(;numVideos -- > 0;) {
aspectRatio = videoObjects[numVideos].getAttribute('height') / videoObjects[numVideos].getAttribute('width');
bodyPos = videoObjects[numVideos].parentNode;
newEl = $(videoObjects[numVideos].cloneNode(false));
newEl = $(newEl);
this.$container.css({ paddingTop: (aspectRatio * 100)+"%" });
newEl.css({
height: '100%',
left: 0,
position: 'absolute',
top: 0,
width: '100%'
}).removeAttr('height').removeAttr('width');
this.$container.html(newEl);
$(bodyPos).html(this.$container);
}
},
destroy: function() {
$.Widget.prototype.destroy.call(this);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment