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
だけをコピペするのが一番簡単。

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
の記述を忘れると動かない。
