advanced code snippet search

Posted By

Jamie on 07/20/12


Tagged


Versions (?)

iFrame Vimeo Hack for SlideDeck 2

 / Published in: HTML
 

The first HTML slide contains a hack that will grab the current SlideDeck object and then bind an onComplete callback to append '?autoplay=1' to the iFrame URL when the deck lands on a slide that has an iFrame in it.

The other HTML slides have Vimeo iFrames in them that are treated the same when the deck animates to them as well.

The JavaScript is only necessary in one of the slides.

Expand | Embed | Plain Text 
  1. <!-- First HTML Slide -->
  2. <iframe id="hack-the-iframe" src="http://player.vimeo.com/video/45934389" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  3.  
  4. <script type="text/javascript">
  5. jQuery(document).ready(function(){
  6. 	deckElement = jQuery('#hack-the-iframe').parents('dl.slidedeck');
  7. 	deckElement.slidedeck().options.complete = function(deck){
  8. 	var thisSlideiFrame = deckElement.find('dd:eq(' + ( deck.current - 1 ) + ')').find('iframe');
  9. 		if( thisSlideiFrame.length ){
  10. 			if( !thisSlideiFrame.attr('src').match(/autoplay=1/) ){
  11. 				thisSlideiFrame.attr('src', thisSlideiFrame.attr('src') + '?autoplay=1' );
  12. 			}
  13. 		}
  14. 	}
  15. });
  16. </script>
  17. <!-- End of First HTML Slide -->
  18.  
  19.  
  20. <!-- Other HTML Slide -->
  21. <iframe src="http://player.vimeo.com/video/45850503" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  22.  
  23.  
  24.  
  25. <!-- Other HTML Slide -->
  26. <iframe src="http://player.vimeo.com/video/45850503" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Report this snippet  

You need to login to post a comment.