wordpress

サイズ可変の動画はめ込みiframe

2013.4.21
jQueryjs

レスポンシブデザインで動画を使う場合、ユーザはyoutubeやvimeoからはめ込みURLを取ってくるのが一般的だと思う。
その場合の固定されてるサイズを、可変にする方法。

参考にしたのはこちら。
http://css-tricks.com/NetMag/FluidWidthVideo/demo.php

(function($){
    
    var $myVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
	    	
	$myVideos.each(function() {
	
	  $(this).attr('data-aspectRatio', this.height / this.width)
	    .removeAttr('height')
	    .removeAttr('width');
	
	});
	
	$(window).resize(function() {
	
	  $myVideos.each(function() {
	    var $this = $(this);
		var newWidth = $this.parent("div.vimeo").width();  		
	    $this.width(newWidth).height(newWidth * $this.attr('data-aspectRatio'));	  
	  });
	
	}).resize();

})(jQuery);

今回のポイントは2つ。

１）jQueryセレクタで、^=って使ったことなかった。
便利だな、覚えておこう。

（この場合の iframe[src^=’http://.. は、http://..から初めまる、という意味。）

２）iframeにattiribute　data-aspectRatioを付与して縦横比率を持たせている。
HTML5で追加された、独自データ属性を使っている。

http://www.html5.jp/tag/attributes/data.html

値をもたせる場所に悩むことがあったが、これで解決するな。

勉強になりました。感謝。

BLOG TOP