Info kplace.plala.jpから移設しました

YouTube埋込み

作成日: 2015/12/22
■目的
　YouTubeの埋め込みをレスポンシブ対応にします。
　使用するのはBootstrapフレームワークです。

■Bootstrap
　ナビバーやボタンをはじめとしてCSSの枠組みやスタイルを部品として提供します。
　デフォルトでレスポンシブデザインとなるのでGoogleのSEO要件のユーザアクセシビリティの向上に対応できます。
　Responsive embedのコンポーネントを使用することでYouTubeの埋め込みをレスポンシブ対応にできます。
bootstrap site
　Bootstrapのサイトはこちら
　Responsive embedのページはこちら

■Responsive embed
　YiuTubeの埋め込みサンプルです。
　実際に適用したページはグリッドシステムとレスポンシブの組み合わせです。
　実際に適用したページはこちら
　　
[ソースコード]..16：9映像の例です
          <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/videoseries?list=PLHg3qh40Bz-KBmZqJ9LC2CLSn0y4uEaXh" frameborder="0" allowfullscreen></iframe>
          </div>
■結果
　bootstrapで提供されるhtmlとCSSで簡単にレスポンシブ対応にすることができます。
　今回もResponsive embedのコンポーネントを使うことで簡単に埋め込みが終了しました。
　 blog 　　 MovableType