Skip to content
Create a gist now

Instantly share code, notes, and snippets.

YouTube iframe Embed and Resize to Content
<script src="page.js"></script>
<!-- You can set the initial size to something sensible, but it will get resized on loading -->
<iframe src="" width="560" height="315"></iframe>
// debouncing function from John Hann
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
if (timeout)
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
// usage:
// // code that takes it easy...
$(function() {
// Find all YouTube videos
var $allVideos = $("iframe[src^='']"),
// The element that is fluid width <-- This needs to be changed!
$fluidEl = $("article");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
// When the window is resized
// (You'll probably want to debounce this)
$(window).smartresize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
.height(newWidth * $'aspectRatio'));
// Kick off one resize to fix all videos on page load
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.