サイズ可変の動画はめ込みiframe
レスポンシブデザインで動画を使う場合、ユーザは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 値をもたせる場所に悩むことがあったが、これで解決するな。 勉強になりました。感謝。