[RUBY] Comment intégrer des vidéos YouTube à l'aide de balises iframe (haml)

introduction

Lors de la création d'une application Rails, j'ai étudié comment intégrer youtube, je vais donc le résumer. Cette fois, YouTube peut être affiché par balisage à l'aide de haml.

Environnement prérequis

L'environnement de l'application créée cette fois est le suivant.

ruby 2.5.1
Rails 5.2.4.3

Échantillon d'achèvement

Si vous pouvez l'intégrer en toute sécurité, vous verrez un écran comme celui-ci. Mettons-le en œuvre maintenant!

Présentez le ham

Juste au cas où, je vais vous expliquer à partir de la méthode d'introduction de haml! C'est facile car il vous suffit d'installer gem!

Décrivez comme suit au bas du Gemfile.

N'oubliez pas l'installation du bundle après avoir écrit dans Gemfile! !!

`Gemfile`


gem 'haml-rails'

`Terminal`


%  bundle install

Vous avez maintenant introduit haml!

Cependant, haml n'est pas appliqué au fichier existant, alors changez-le en haml en écrivant comme suit.

`Terminal`


%  rails haml:erb2haml

Lorsque vous l'exécutez et que vous voyez quelque chose comme celui ci-dessous, tapez "y" et appuyez sur Entrée.

`Terminal`


Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)

Vous pouvez maintenant également appliquer le haml aux fichiers existants! !!

Copiez l'URL de la vidéo Youtube

Ensuite, nous passerons enfin à l'intégration de YouTube. Cette fois, nous allons l'implémenter en utilisant ce youtube comme exemple.

Tout d'abord, copiez la balise HTML intégrée de la vidéo YouTube que vous souhaitez afficher.

Vous pouvez copier en suivant les étapes ci-dessous.

Incorporer la vidéo dans le fichier de vue

Maintenant que vous avez une copie, jouons avec le fichier de vue. Cette fois, nous utiliserons ce qu'on appelle une balise iframe.

Si vous écrivez la balise iframe en haml, elle sera écrite comme ci-dessous.

%iframe{Je décrirai les informations de YouTube dans ce}

Tout d'abord, ouvrez le fichier de vue dans lequel vous souhaitez afficher la vidéo youtube et collez celui que vous avez copié précédemment tel quel.

`ruby:〇〇〇.html.haml`


<iframe width="560" height="315" src="https://www.youtube.com/embed/_ZRp7KYXM1A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Après avoir collé, je vais en fait corriger la façon d'écrire le haml.

Veuillez copier la partie de width ~ allowfullscreen dans la balise dans {} ʻof% iframe {}`.

`ruby:〇〇〇.html.haml`


<iframe width="560" height="315" src="https://www.youtube.com/embed/_ZRp7KYXM1A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
⬇️ ⬇️ ⬇️
%iframe{ width="560" height="315" src="https://www.youtube.com/embed/_ZRp7KYXM1A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen }

Si cela reste tel quel, une erreur se produira, nous apporterons donc d'autres corrections. Il y a plusieurs endroits à réparer. C'est un petit changement, donc je pense que c'est plus facile à comprendre si vous regardez l'exemple.

`ruby:〇〇〇.html.haml`


%iframe{ width="560" height="315" src="https://www.youtube.com/embed/_ZRp7KYXM1A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen }
⬇️ ⬇️ ⬇️
%iframe{ width: "560", height: "315", src: "https://www.youtube.com/embed/_ZRp7KYXM1A", frameborder: "0", allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture", allow: "fullscreen" }

Pour le moment, si vous écrivez la partie corrigée,

Passer de = à :
Ajoutez , après l'attribut
Remplacez ʻallowfullscreenpar ʻallow: "fullscreen"

Nous apportons de tels changements.

En comparant la description de la première balise HTML avec la description après modification, c'est une telle différence.

`Description originale (version html)`


<iframe width="560" height="315" src="https://www.youtube.com/embed/_ZRp7KYXM1A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

`Description corrigée (version haml)`


%iframe{width: "560", height: "315", src: "https://www.youtube.com/embed/_ZRp7KYXM1A", frameborder: "0", allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture", allow: "fullscreen" }

Avec l'opération ci-dessus, la vidéo youtube a été affichée avec succès!

En passant, il est également possible de changer la taille affichée en changeant la valeur du paramètre (width, height, etc.)!

Paramètres autres que ceux écrits à l'origine

--Paramètres qui déterminent l'heure de début et l'heure de fin de la vidéo --Paramètre pour masquer les vidéos associées après la fin de la vidéo

Etc.

J'espère pouvoir ajouter plus de paramètres quand j'aurai du temps dans le futur! !!