shou.com
JP / EN

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

Mon Sep 18, 2017
Mon Sep 18, 2017
フロントエンド

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をレシポンシブで埋め込む

Tags
Bootstrap