[RUBY] Einbetten von YouTube-Videos mithilfe von Iframe-Tags (haml)

Einführung

Beim Erstellen einer Rails-Anwendung habe ich untersucht, wie YouTube eingebettet werden kann, daher werde ich es zusammenfassen. Dieses Mal kann YouTube durch Markup mit haml angezeigt werden.

Voraussetzung Umgebung

Die Umgebung der diesmal erstellten Anwendung ist wie folgt.

ruby 2.5.1
Rails 5.2.4.3

Abschlussprobe

Wenn Sie es sicher einbetten können, sehen Sie einen Bildschirm wie diesen. Lassen Sie es uns jetzt implementieren!

Haml einführen

Nur für den Fall, ich werde aus der Einführungsmethode von haml erklären! Es ist einfach, weil Sie nur gem installieren müssen!

Beschreiben Sie unten in der Gemfile Folgendes.

Vergessen Sie nicht, das Bundle zu installieren, nachdem Sie in Gemfile geschrieben haben! !!

`Gemfile`


gem 'haml-rails'

`Terminal`


%  bundle install

Sie haben jetzt haml eingeführt!

Haml wird jedoch nicht auf die vorhandene Datei angewendet. Ändern Sie sie daher wie folgt in haml.

`Terminal`


%  rails haml:erb2haml

Wenn Sie es ausführen und etwas wie das folgende sehen, geben Sie "y" ein und drücken Sie die Eingabetaste.

`Terminal`


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

Jetzt können Sie haml auch auf vorhandene Dateien anwenden! !!

Kopiere die URL des Youtube-Videos

Dann werden wir endlich mit dem Einbetten von YouTube fortfahren. Dieses Mal werden wir es am Beispiel von diesem Youtube implementieren.

Kopieren Sie zunächst das eingebettete HTML-Tag des YouTube-Videos, das Sie anzeigen möchten.

Sie können kopieren, indem Sie die folgenden Schritte ausführen.

Video in Ansichtsdatei einbetten

Nachdem Sie eine Kopie haben, spielen wir mit der Ansichtsdatei. Dieses Mal verwenden wir ein sogenanntes Iframe-Tag.

Wenn Sie das iframe-Tag in haml schreiben, wird es wie folgt geschrieben.

%iframe{Ich werde die Informationen von YouTube in diesem beschreiben}

Öffnen Sie zunächst die Ansichtsdatei, in der Sie das YouTube-Video anzeigen möchten, und fügen Sie die zuvor kopierte Datei so ein, wie sie ist.

`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>

Nach dem Einfügen werde ich es tatsächlich auf die Art und Weise korrigieren, wie Haml geschrieben wird.

Bitte kopieren Sie den Teil von width ~ allowfullscreen im Tag in {} von% 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 }

Wenn dies unverändert bleibt, tritt ein Fehler auf, sodass wir weitere Korrekturen vornehmen. Es gibt mehrere Stellen, die behoben werden müssen. Es ist eine kleine Änderung, daher denke ich, dass es einfacher zu verstehen ist, wenn Sie sich das Beispiel ansehen.

`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" }

Wenn Sie vorerst den korrigierten Teil ausschreiben,

Wechseln Sie von = zu :
Fügen Sie nach dem Attribut , hinzu
Ändern Sie allowfullscreen in allow:" fullscreen "

Wir nehmen solche Änderungen vor.

Der Vergleich der Beschreibung des ersten HTML-Tags mit der Beschreibung nach der Änderung ist ein solcher Unterschied.

`Originalbeschreibung (HTML-Version)`


<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>

`Korrigierte Beschreibung (Haml-Version)`


%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" }

Mit der obigen Operation wurde das YouTube-Video erfolgreich angezeigt!

Übrigens ist es auch möglich, die angezeigte Größe durch Ändern des Wertes des Parameters (width, height usw.) zu ändern!

Andere als die ursprünglich geschriebenen Parameter

Parameter, die die Start- und Endzeit des Videos bestimmen --Parameter zum Ausblenden verwandter Videos nach dem Ende des Videos

Und so weiter.

Ich hoffe, ich kann weitere Parameter hinzufügen, wenn ich in Zukunft Zeit habe! !!