取りあえず実装し、今の所問題なく表示されていますが、
前回より若干スタイルシート(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>
今度はPC側で思うようなサイズで表示されなくなる。
でぇ、対処法としてスタイルシート(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>
しまい