Bootstrapにflickrとyoutubeをレシポンシブで埋め込む

Bootstrapにflickrとyoutubeをレシポンシブで埋め込むやり方をググっていたら小一時間悩んだのでメモ。

bootstrapにはあらかじめこれらembed-responsiveが用意されているのでこれを使います。

youtubeの場合

1
2
3
4


#show.html.erb
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/gfzuzDrVRVM"></iframe>
</div>

これでレシポンシブ対応はok。 src=の部分をちょっと工夫する必要があって、共有からgfzuzDrVRVMだけをコピペするのが一番簡単。

Bootstrapにflickrとyoutubeをレシポンシブで埋め込む

1

src="//www.youtube.com/embed/gfzuzDrVRVM"

flickrの場合

1
2
3


<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://flic.kr/p/Yv6qnS/player"></iframe>
</div>

flickrの場合は単純にshareからコピペするだけ、ただし、playerの記述を忘れると動かない。

Bootstrapにflickrとyoutubeをレシポンシブで埋め込む