FlexSlider2 動画「Youtube」を追加
2015年8月1日
取りあえず実装し、今の所問題なく表示されていますが、
前回より若干スタイルシート（CSS）をカスタマイズし、
今度は「FlexSlider2」にyoutube（動画）を表示させて見ました。
サンプル：https://www.hcz.jp/spec.html
■ オプション設定
<script>
$(document).ready(function() {
$('#right-menu').sidr({
name: 'right-sidr',
side: 'right',
source: '#navigation'
});
$(window).touchwipe({
wipeRight: function() {
$.sidr('close', 'sidr-main');
},
wipeLeft: function() {
$.sidr('open', 'sidr-main');
},
preventDefaultEvents: false
});
});
</script>
Youtube側で、共有の「埋め込みコード」を ホームページ内のFlexSlider2にコピペ。
動画のサイズはカスタムサイズで任意。検証するとPCでは問題なく表示されるが、
スマホ（レスポンシブ）で見ると問題あり。
「FlexSlider2」は動画は実装できるが、レスポンシブには対応してないようだ。
試しにYoutubeの「埋め込みコード」を、サイズなしにしてみた。
例
<iframe src="https://www.youtube.com/embed/××××?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
今度はＰＣ側で思うようなサイズで表示されなくなる。
でぇ、対処法としてスタイルシート（css）で動画をレスポンシブさせることにしました。
<style>
iframe{
width:100%;
height:360px;
border:0;
}
</style>
上記を記述することで、レスポンシブにも対応できるようになります。
※ heightの数値指定は、「100％」や「auto」は無視されるので、
明確な値（●●px）を記述するように。それから、ドキュメントタイプが「HTML5」の場合、
Youtubeの「埋め込みコード」には、不必要なタグがあるので削除しておきましょう。
例
<iframe src="https://www.youtube-nocookie.com/embed/××××?rel=0" title="YouTube">YouTube</iframe>
しまい
コメントを残す