YoutubeをURLで埋め込む

記事投稿アプリにYoutubeをURLで埋め込みます。

カラムの準備

ユーザーが入力した値を保存する為のカラムを用意する。

#models/embed.rb

class Embed < ApplicationRecord

 enum embed_type: { youtube: 0 }

 validates :identifier. length: { maximum: 200 }

end

embed_type でYoutubeを選択します。

identifier でURLを保存します。

入力フォーム

simple_form を使っています。

公式　simple_form

= simple_form_for embed, \\
    html: { class: 'js-update-article-block' }, \\
    url: admin_article_article_block_path(article.uuid, article_block), \\
    data: { \\
      remote: true, \\
      disable: true \\
    } do |f|
  .box-body
    = f.input :embed_type, collect: Embed.embed_types_i18n.invert, include_blank: false
    = f.input :identifier
  .box-footer
    .pull-right
      => link_to 'キャンセル', '#', class: %w[btn btn-default js-cancel-article-block]
      => f.button :submit, class: %[btn btn-primary]

.box-body内が入力フォームになります。

ビュー

公式ページから、どういった形式のHTMLで埋め込みできるか調べます。

公式ページ

Youtube 動画の埋め込み

Youtubeの共有・埋め込むを選択すると埋め込み用のHTMLが表示されるので

<iframe width="560" height="315" src="<https://www.youtube.com/embed/KPNXPQduoxw>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Youtubeの埋め込み用URLの構成

<https://www.youtube.com/embed/動画一意のID>

/ で区切りをつけた配列を返して末尾を取得する為に splitメソッド を使ってモデルに定義します。

#models/embed.rb

def split_id_from_youtube_url
  identifier.split('/').last if youtube?
end

#埋め込みしたいview

ruby:
  embed = local_assigns[:embed]
  width = local_assigns[:width] || 853
  height = local_assigns[:height] || 480

.embed-youtube
  = content_tag 'iframe', nil, width: width, height: height, src: "<https://www.youtube.com/embed/#{embed.split_id_from_youtube_url}>", \\
    frameborder: 0, gesture: 'media', allow: 'encrypted-media', allowfullscreen: true

最後に

読んでいただいた方、ありがとうございました。