Conversion d'un «lien» Youtube normal en une vidéo intégrée

Question

Mon objectif: j'essaie de permettre aux utilisateurs d'intégrer un lien vers une vidéo Youtube sur mon site, tout en me donnant le contrôle des paramètres du lecteur.

Je voudrais le faire en demandant uniquement à l'utilisateur de fournir le lien (pas le code d'intégration complet), d'où je peux en quelque sorte coller ce lien dans le code d'intégration.

J'ai essayé de faire une simple substitution avec quelques liens Youtube ( http://youtu.be/... ) mais ils ne fonctionnent pas, disant 'film non chargé'. Existe-t-il un moyen fiable de le faire?

Answer 1

Je le fais assez souvent pour les clients, l'essentiel est que vous analysiez l'ID à partir de l'URL, puis génériez le iframe HTML à l'aide de cela.

 def youtube_embed(youtube_url)
  if youtube_url[/youtu\.be\/([^\?]*)/]
    youtube_id = $1
  else
    # Regex from # http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url/4811367#4811367
    youtube_url[/^.*((v\/)|(embed\/)|(watch\?))\??v?=?([^\&\?]*).*/]
    youtube_id = $5
  end

  %Q{<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/#{ youtube_id }" frameborder="0" allowfullscreen></iframe>}
end

youtube_embed('youtu.be/jJrzIdDUfT4')
# => <iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/jJrzIdDUfT4" frameborder="0" allowfullscreen></iframe>
 

Je mets cela dans une aide. Modifiez la hauteur, la largeur et les options selon vos goûts.

Answer 2

Une autre réponse consiste à utiliser ce joyau qui gère YouTube et Vimeo, et pourrait être étendu à plus. Il s'intègre également bien avec AR afin que vous puissiez mettre en cache le code HTML résultant au lieu de filtrer sur chaque rendu:

https://github.com/dejan/auto_html

Answer 3

J'ai utilisé la réponse la mieux notée à propos de la fonction youtube_embed mais lorsque j'ai implémenté à mon avis, je voyais le code iframe apparaître sur ma page, mais pas de vidéo. J'ai ajouté raw avant l'appel de fonction et tout va bien avec la page maintenant.

À l'intérieur de ma vue.html.erb

 <p><%= raw(youtube_embed(@experiment.researchsection.videolink)) %></p>
 

Answer 4

quelque chose comme ça (par exemple dans le modèle):

 @@video_regexp = [ /^(?:https?:\/\/)?(?:www\.)?youtube\.com(?:\/v\/|\/watch\?v=)([A-Za-z0-9_-]{11})/, 
                   /^(?:https?:\/\/)?(?:www\.)?youtu\.be\/([A-Za-z0-9_-]{11})/,
                   /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/user\/[^\/]+\/?#(?:[^\/]+\/){1,4}([A-Za-z0-9_-]{11})/
                   ]

def video_id
  @@video_regexp.each { |m| return m.match(source_url)[1] unless m.nil? }
end
 

où source_url est le lien complet vers la vidéo. puis un assistant:

 def youtube_video(video_id)
  render :partial => 'youtube_video', :locals => { :id => video_id }
end
 

et échantillon partiel (haml):

 %iframe{:allowfullscreen => "", :frameborder => "0", :height => "349",
        :src => "http://www.youtube.com/embed/#{id}", :width => "560"}
 

et en vue aussi simple que:

 = youtube_video Model.video_id
 

Answer 5

C'est ce que youtube utilise:

<iframe width="425" height="349" src="http://www.youtube.com/embed/zb-gmJVW5lw" frameborder="0" allowfullscreen></iframe>

Ensuite, il suffit d'utiliser une regexp pour modifier le lien:

http://www.youtube.com/watch?v=zb-gmJVW5lw

dans:

http://www.youtube.com/embed/zb-gmJVW5lw

Voici une preuve de concept regexp pour la mise en correspondance régulière des liens youtube:

• http://rubular.com/r/Fitt7PPJW1

Et voici une preuve de concept regexp pour la mise en correspondance youtu.liens:

• http://rubular.com/r/MTgd9nXzFA

Notez que l'url d'embed peuvent également être chargés dans le navigateur qui ouvre une page où la vidéo est en plein écran.