youtubeをembedしてみる

テーブルに保存したyoutubeの動画をエンベッド表示する。

morizyun.github.io

あんまり細かいこと考えずにこの通りやればできました。
URLを直リンクではなくて、エンベッド用のURL使う必要があるくらい。

ちなみに、ここは以下を手作業でやってるので、いつかサイト内でできるようにすべき。

ブラウザで検索してyoutubeページ開く
→ エンベッド用のURLを取得、URL部分切り取る
→ URLをテーブルに格納する

[ anime_details/_staffandcast.html.erb ]

...
<div class="youtube-container">
    <iframe id="player" type="text/html" width="640" height="390"
                 src="<%= anime_detail.op_movie %>"
                 frameborder="0"></iframe>
</div>
...

[ anime_details.scss ]

// youtube responsive embed
.youtube-container{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}
.youtube-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ぐりぐり大きさが動くyoutubeエンベッドができましたん。