Skip to content

Instantly share code, notes, and snippets.

@osben
Created June 29, 2016 11:22
Show Gist options
  • Save osben/5820232c30f03c3c4a7dd441988f7c5d to your computer and use it in GitHub Desktop.
Save osben/5820232c30f03c3c4a7dd441988f7c5d to your computer and use it in GitHub Desktop.
jQuery responsiveVideo
/**
* jQuery.responsiveVideo
* Version 1.1
* Copyright (c) 2014 c.bavota - http://bavotasan.com
* Dual licensed under MIT and GPL.
* Date: 01/16/2014
**/
( function($) {
$.fn.responsiveVideo = function() {
// Add CSS to head
$( 'head' ).append( '<style type="text/css">.responsive-video-wrapper{width:100%;position:relative;padding:0}.responsive-video-wrapper iframe,.responsive-video-wrapper object,.responsive-video-wrapper embed{position:absolute;top:0;left:0;width:100%;height:100%}</style>' );
// Gather all videos
var $all_videos = $(this).find( 'iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="dailymotion.com"], iframe[src*="kickstarter.com"][src*="video.html"], object, embed' );
// Cycle through each video and add wrapper div with appropriate aspect ratio if required
$all_videos.not( 'object object' ).each( function() {
var $video = $(this);
if ( $video.parents( 'object' ).length )
return;
if ( ! $video.prop( 'id' ) )
$video.attr( 'id', 'rvw' + Math.floor( Math.random() * 999999 ) );
$video
.wrap( '<div class="responsive-video-wrapper" style="padding-top: ' + ( $video.attr( 'height' ) / $video.attr( 'width' ) * 100 ) + '%" />' )
.removeAttr( 'height' )
.removeAttr( 'width' );
} );
};
$( 'body' ).responsiveVideo();
} )(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment