Embed Flickr and YouTube Responsively in Bootstrap

I spent about an hour searching for a way to embed Flickr and YouTube responsively in Bootstrap, so here’s a memo.

Bootstrap already provides embed-responsive, so we can use it.

For YouTube

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

This makes it responsive. For the src= part, you need to tweak it a bit. The easiest way is to copy only gfzuzDrVRVM from the share link.

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

For Flickr

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

For Flickr, simply copy from the share link. However, it won’t work if you forget to include player.