In this article we will show you a tutorial about keywords related to :
- Embed video html
- Html video youtube
- Embed youtube autoplay
- Youtube embed code
which are searched by many people.
As we all know, YouTube is a video platform that reaches many people around the world.
All types of videos with various topics can easily be found on YouTube.
For a Blogger like me who likes writing articles on blogs, sometimes I need a video as a complement to the article I'm discussing.
Therefore, I have to insert the youtube video that I need in the article that I will publish.
However, the video must be installed properly, in other words it must adjust to the layout of my blog.
So, I need an html code that can make youtube video becomes responsive when the blog is opened on a mobile device.
And for those of you who also need the Youtube embed code as me, I will share an embed video html code which will adjust to the layout of the blog or responsive and also valid html5.
Responsive and Html5 Valid Youtube Embed Code
Here is the Html video youtube code and how to install it on blogs to be responsive and valid html5.
The first step: Open YouTube!
Then find the video that you want to embed in a blog post.
If you have found the video, click Share
and then select Embed.
Next, Copy the provided iframe code.
Youtube embed code will be:
<iframe width="560" height="315" src="https://www.youtube.com/embed/mzIsfSsZh7I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
The next step is to delete a portion of the code above so the results will be like this:
<iframe src="https://www.youtube.com/embed/mzIsfSsZh7I"></iframe>
To make it responsive, we need to add the following code:
style="min-height: 315px; width: 90%;"
So the end result will be as below:
<iframe src=" https://www.youtube.com/embed/mzIsfSsZh7I " style="min-height: 315px; width: 90%;" ></iframe>
Adjust Width and min-height as needed.
The final step is to insert code that has been changed to be responsive to the blog post.
The steps, create a new post, click the HTML mode (not compose) then paste the changed Youtube embed video html code into the blog post (As shown in the picture).
In addition, you can also set the YouTube video to play automatically when visitors open the blog.
This is how you do it:
Embed Youtube Autoplay
Add the following code to the modified iframe code:
?rel=0&autoplay=1
So the embed video html code becomes:
<iframe src=" https://www.youtube.com/embed/mzIsfSsZh7I?rel=0&autoplay=1
" style="min-height: 315px; width: 90%;" ></iframe>
Finally, install the code in the blog post!
Thanks to xkomo.com and blogtipsintrik.com for the reference
