How to embed youtube videos using iframe tags (haml)

Introduction

When creating a Rails application, I investigated how to embed youtube, so I will summarize it. This time, youtube can be displayed by markup using haml.

Prerequisite environment

The environment of the application created this time is as follows.

ruby 2.5.1
Rails 5.2.4.3

Completion sample

If you can embed it safely, you will see a screen like this. Let's implement it now!

Introduce haml

Just in case, I will explain how to install haml! It's easy because you just need to install gem!

Describe as follows at the bottom of the Gemfile.

Don't forget bundle install if you write it in Gemfile! !!

`Gemfile`


gem 'haml-rails'

`Terminal`


%  bundle install

You have now introduced haml!

However, haml is not applied to the existing file, so change it to haml by writing as follows.

`Terminal`


%  rails haml:erb2haml

When you run it and you see something like the one below, type "y" and press Enter.

`Terminal`


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

Now you can apply haml to existing files as well! !!

Copy the URL of the Youtube video

Then we will finally move on to embedding youtube. This time, we will implement it using this youtube as an example.

First, copy the HTML embedded tag of the youtube video you want to display.

You can copy by following the steps below.

Embed video in view file

Now that you have a copy, let's play with the view file. This time we will use what is called an iframe tag.

If you write the iframe tag in haml, it will be written as below.

%iframe{I will describe youtube information in this}

First, open the view file where you want to display the youtube video, and paste the one you copied earlier as it is.

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

After pasting, I will actually fix it to the way of writing haml.

Please copy the part of width ~ allowfullscreen in the tag into{}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 }

If this is left as it is, an error will occur, so we will make further corrections. There are several places to fix. It's a small change, so I think it's easier to understand if you look at the example.

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

For the time being, if you write out the corrected part,

Change from = to :
Add , after the attribute
Change ʻallowfullscreen to ʻallow:" fullscreen "

We are making such changes.

Comparing the description of the first HTML tag with the description after modification, it is such a difference.

`Original description (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>

`Corrected description (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" }

With the above operation, youtube video was successfully displayed!

By the way, it is also possible to change the displayed size by changing the value of the parameter (width, height, etc.)!

Parameters other than those originally written

--Parameters that determine the start time and end time of the video --Parameter to hide related videos after the video ends

And so on.

I hope I can add more parameters when I have time in the future! !!