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

■目的
 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