html5

FlexSlider2 動画「Youtube」を追加

Categories | ホームページ YouTube

取りあえず実装し、今の所問題なく表示されていますが、

前回より若干スタイルシート(CSS)をカスタマイズし、

今度は「FlexSlider2」にyoutube(動画)を表示させて見ました。

サンプル:https://www.hcz.jp/spec.html

0801 01 400x300 FlexSlider2 動画「Youtube」を追加

 

■ オプション設定

<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では問題なく表示されるが、

スマホ(レスポンシブ)で見ると問題あり。

0801 02 229x400 FlexSlider2 動画「Youtube」を追加

「FlexSlider2」は動画は実装できるが、レスポンシブには対応してないようだ。

試しにYoutubeの「埋め込みコード」を、サイズなしにしてみた。

 

<iframe src="https://www.youtube.com/embed/××××?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

 

0801 03 400x300 FlexSlider2 動画「Youtube」を追加

今度は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>

 

しまい

Comment(0) | Trackback(0)

TAGS: / / / / | 2015年8月1日 |