BootstrapのEmbedsの使い方をサンプルコード付き解説！
BootstrapのEmbedsの使い方をサンプルコード付き解説します。Embedsクラスを指定する事により、簡単にレスポンシブな動画やスライドショーなどを表示させる事ができます。iframeなどの埋め込みコンテンツにURLを指定する事で表示させます。
BootstrapのEmbeds（エンベッド）とは？
今回はBootstrapのEmbeds（エンベッド）について紹介します。
Embeds（エンベッド）クラスは、簡単にレスポンシブな動画やスライドショーなどを表示させる事ができます。
また使い方のルールではiframe、embed、video、objectを直接適応させます。
BootstrapのEmbedsの使い方
BootstrapのEmbedsの使い方はdiv要素にembed-responsiveクラスとアスペクト比embed-responsive-{aspect}のクラスを指定します。
iframeなどの埋め込みコンテンツにembed-responsive-itemを指定し、Youtubeなどのurlを引用してきます。※embed-responsive-itemの指定は任意ですが、指定する事が推奨されています。
下記のサンプルコードを参考にして下さい。
アスペクト比の変更の仕方
アスペクト比の変更の仕方はdiv要素のembed-responsive-{aspect}を1by1, 4by3, 16by9,21by9 に変更が可能です。
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="＃"></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="＃"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="＃"></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="＃"></iframe>
</div>URLを指定してブラウザーで表示しても見れない
YoutubeなどのURLを引用した際にYoutube側から(www.youtube.com で接続が拒否されました。)と言われた時の対処法を解説します。
エラーの原因は、iframeで指定したURLが見る専用のURLなのでこのURLを見せる専用に変更してあげないといけません。
方法は下記のサンプルコードのようにwatch?v=の部分を/embed/に変更する事によってブラウザーで表示する事ができます。
地味にハマってしまうのでみなさん注意して下さい。
正常に表示するコード
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/5eu0mqEO19c" allowfullscreen></iframe>
</div>エラーの出るコード
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=5eu0mqEO19c" allowfullscreen></iframe>
</div>
