rails erbテンプレートで動画の埋め込みを行えない

Question

お疲れ様です、質問させていただきます。よろしくお願い申し上げます。

今回Railsのサイトにyoutubeの動画を埋め込みたいと考え、ググってコードを見つけたまでは良いのですが、
Railsのerbテンプレートに合わせたコードの記法がわからず大変困っています。

質問内容
1 下記コードのerbテンプレートに合わせた記法が知りたい。

それでは よろしくお願い申し上げます。

失礼致します。

index.html.erb

    <div class="youtube-container">
    <iframe id="player" type="text/html" width="640" height="390" src="https://www.youtube.com/watch?v=h-5vS8F7VtE"
  frameborder="0"></iframe>
  </div>

xxxx.scss

    // youtube responsive
.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%;
}

Comments

[rifuch]

この質問では、何が知りたいのかわからないです。html.erbファイルは普通のHTMLはHTMLとして処理するので、そのままで表示できますが、Railsを使うと言うことは、何かを動的に表示したいということでしょうから、そのあたりの情報を質問に加えてみてください。

Answer 1

動画の埋め込みコード

<div class="youtube-container">
  <iframe id="player" type="text/html" width="640" height="390" src="<%= "https://www.youtube.com/watch?v=#{@movie_id}" %>"  frameborder="0"></iframe>
</div>

のように、動画の参照を変更できるように変更しつつ、埋め込みの設定をすることができるとおもいます
(ERB に不慣れなため 文法エラーなどあるかもしれません)

---

しかし、せっかくRails を利用しているのですから、そちらで用意されているメソッドを利用したほうが良いでしょう

コード：

<% iframe = content_tag(
    :iframe,
    '', # empty body
    width: 560,
    height: 315,
    src: "https://www.youtube.com/embed/#{@movie_id}",
    frameborder: 0,
    allowfullscreen: true
) %>
<%= content_tag(:div, iframe, class: 'youtube-container') %>

出力：

<div class="youtube-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/h-5vS8F7VtE" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

ヘルパーメソッド

前述のコードをヘルパーメソッドへ移行・利用することで、ビューでのコードを簡潔に記述することができるようになります
(movies コントローラを生成し利用しているとみなして記述しています)

ヘルパーメソッドの定義：

• app/helpers/movies_helper.rb

module MoviesHelper
  def movie(opts)
    iframe = content_tag(
      :iframe,
      '', # empty body
      width: 560,
      height: 315,
      src: "https://www.youtube.com/embed/#{opts[:movie_id]}",
      frameborder: 0,
      allowfullscreen: true
    )
    content_tag(:div, iframe, class: 'youtube-container')
  end
end

ヘルパーメソッドの利用：

• app/views/movies/index.html.erb

<%= movie(movie_id: 'h-5vS8F7VtE') %>

(今回はsrc のみ指定可能にしましたが、もちろん他の要素を可変状態に変更してもいいでしょう)

埋め込みコードのパラメータ

URL の部分、
https://www.youtube.com/watch?v=と記述されていますが、そちらでは動作しませんでした
https://www.youtube.com/embed/ と記述することで動画の埋め込みが動作しました

以上、何か参考になれば幸いです

Links

• Embed videos and playlists - YouTube Help
• Ruby on Rails API
• ActionView::Helpers::TagHelper
• Ruby on Rails ガイド：体系的に Rails を学ぼう

Comments

[cheeeeeeese]

gouf様、

詳しくお教え頂き本当にありがとうございます。

それでは失礼致します。