I want to add a YouTube video to my page, but I can’t figure it out on my own, can you help me with it?
At the moment, you will need to do this through iframe. In near future we will add native support for youtube and vimeo embeds and some more. When we do that, I will update this comment.
Until then, lets follow next steps:
If you right click on a video on youtube, you will see an option ‘Copy Embed Code’.
After you copy that code, paste in notepad temporary, because we need only URL, not whole iframe. You need only highlighted part from 2nd screenshot below. Use that.
Add iframe in your div just like I did in in screenshot below. You can find iframe tag on top bar, you can also see this in screenshot below.
Now in settings of iframe, in
Source input paste URL that we got in Step 1.
When you just add iframe and do no styling, it will not look right, thats how HTML works, it doesnt recognize automatically resolution of your video, so we need to style it properly.
- Set position to relative
- Set padding bottom proprotional to video resolution in percentages. If video is resolution 16/9, you can calculate this by dividing 9 with 16 = 0.5625 and then multiply it with 100. (9/16*100 = 56.25).
Most common scenarios are:
- 56.25% for 16/9
- 62.5% for 16/10
- 75% for 4/3
- 100% for 1/1
- Set position to absolute (top 0, left 0)
- Set width & height to 100%
And now you are all set, your video will look exactly like it should be.
All this can be done through modification of youtube embed url from step 1.
In this example I will just cover most common case to autoplay video while muted, and hide controls.
All you need to do is to modify URL from step 1 by adding
?autoplay=1&mute=1&showinfo=0&controls=0 in the end.
So end url with look something like this:
Ofcourse theres much more possibilities with youtube embed which you can learn here.