Bookmark and Share

Fluid and responsive YouTube and Vimeo videos

CSS solution as one of the options.
If you want to help make iFrame videos responsive there is a number of CSS hacks that might help you do that.

1
2
3
4
5
6
7
8
9
10
11
12
13
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videoWrapper object,
.videoWrapper embed,  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Source: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Javascript solultion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
(function ( window, document, undefined ) {
 
  /*
   * Grab all iframes on the page or return
   */
  var iframes = document.getElementsByTagName( 'iframe' );
 
  /*
   * Loop through the iframes array
   */
  for ( var i = 0; i < iframes.length; i++ ) {
 
    var iframe = iframes[i],
 
    /*
       * RegExp, extend this if you need more players
       */
    players = /www.youtube.com|player.vimeo.com/;
 
    /*
     * If the RegExp pattern exists within the current iframe
     */
    if ( iframe.src.search( players ) > 0 ) {
 
      /*
       * Calculate the video ratio based on the iframe's w/h dimensions
       */
      var videoRatio        = ( iframe.height / iframe.width ) * 100;
 
      /*
       * Replace the iframe's dimensions and position
       * the iframe absolute, this is the trick to emulate
       * the video ratio
       */
      iframe.style.position = 'absolute';
      iframe.style.top      = '0';
      iframe.style.left     = '0';
      iframe.width          = '100%';
      iframe.height         = '100%';
 
      /*
       * Wrap the iframe in a new <div> which uses a
       * dynamically fetched padding-top property based
       * on the video's w/h dimensions
       */
      var wrap              = document.createElement( 'div' );
      wrap.className        = 'fluid-vids';
      wrap.style.width      = '100%';
      wrap.style.position   = 'relative';
      wrap.style.paddingTop = videoRatio + '%';
 
      /*
       * Add the iframe inside our newly created <div>
       */
      var iframeParent      = iframe.parentNode;
      iframeParent.insertBefore( wrap, iframe );
      wrap.appendChild( iframe );
 
    }
 
  }
 
})( window, document );

So, what you have to do is to drop the JavaScript file onto your page. Don’t forget that it needs to be placed before the closing tag or alternatively you can also put it inside a DOM ready function wrapper. Then simply let it work its magic. What is brilliant here is that there are no configurations required. Besides, to make the use of this tool more comfortable there is a minified version included in the download.

Source: http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/

Leave a Reply