Editing YouTube Embed Codes for Optimized Mobile Video Playback
YouTube Shorts (Vertically Formatted - 9:16, 1:1)
In order to embed your video on a website using YouTube Shorts you will have to:
1. First upload your 9:16 or 1:1 video to your YouTube channel (both the 9:16 and 1:1 video formats will automatically upload as a YouTube Short due to their unique aspect ratios).
2. Once uploaded, play the video on your desktop/laptop (@ YouTube Shorts), right click on it, and select "Copy embed code."
3. Edit the YouTube embed code according to the below specifications.
In order to embed your video on a website using YouTube Shorts you will have to:
1. First upload your 9:16 or 1:1 video to your YouTube channel (both the 9:16 and 1:1 video formats will automatically upload as a YouTube Short due to their unique aspect ratios).
2. Once uploaded, play the video on your desktop/laptop (@ YouTube Shorts), right click on it, and select "Copy embed code."
3. Edit the YouTube embed code according to the below specifications.
YouTube Embed Code Edit Specifications
When you copy your embed code it will be similar to the embed code below (as of 11/9/22). Note that the frame width and height will vary:
<iframe width="527" height="936" src="https://www.youtube.com/embed/UniqueNumber12345" title="Unique Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
We want to do two things to the code to make it more mobile format friendly.
1. At the end of the video we do not want "related videos" to manifest. Rather no videos or only your YouTube channel videos.
2. "Resize" the video so it plays back in the correct mobile format and fits the screen correctly.
In order to accomplish these two objectives, we will need to add or amend some code to the embed code. Edit/amend the code as follows (added and amended code in black)
9x16 Video (Note, use the 9x16 "non-social" version)
<iframe width="300" height="533" src="https://www.youtube.com/embed/UniqueNumber12345?rel=0" title="Unique Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
1x1 Video
<iframe width="300" height="300" src="https://www.youtube.com/embed/UniqueNumber12345?rel=0" title="Unique Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
We do not recommend posting a 2:3 or 4:5 formatted videos on your site. 9:16 is the preferred, but at times a 1:1 frame size will better fit the website's design.
Note that currently YouTube Shorts does not allow you to upload a unique thumbnail, so you will be at the mercy of the automatically generated thumbnail.
When you copy your embed code it will be similar to the embed code below (as of 11/9/22). Note that the frame width and height will vary:
<iframe width="527" height="936" src="https://www.youtube.com/embed/UniqueNumber12345" title="Unique Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
We want to do two things to the code to make it more mobile format friendly.
1. At the end of the video we do not want "related videos" to manifest. Rather no videos or only your YouTube channel videos.
2. "Resize" the video so it plays back in the correct mobile format and fits the screen correctly.
In order to accomplish these two objectives, we will need to add or amend some code to the embed code. Edit/amend the code as follows (added and amended code in black)
9x16 Video (Note, use the 9x16 "non-social" version)
<iframe width="300" height="533" src="https://www.youtube.com/embed/UniqueNumber12345?rel=0" title="Unique Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
1x1 Video
<iframe width="300" height="300" src="https://www.youtube.com/embed/UniqueNumber12345?rel=0" title="Unique Title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
We do not recommend posting a 2:3 or 4:5 formatted videos on your site. 9:16 is the preferred, but at times a 1:1 frame size will better fit the website's design.
Note that currently YouTube Shorts does not allow you to upload a unique thumbnail, so you will be at the mercy of the automatically generated thumbnail.
Standard YouTube (Horizontally Formatted - 16:9)
In order to embed your video on a website using the Standard YouTube format you will have to:
1. First upload your 16:9 video to your YouTube channel.
2. Launch the video's URL and select the share icon below the video and then select the embed code (< >)
3. Enable (check the box) "Show Player Controls"
3. Edit the YouTube embed code according to the below specifications.
When you copy your embed code it will be similar to the embed code below (as of 2/20/23). Note that the frame width and height may vary:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UniqueNumber12345" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
We want to do one thing to the code to make it more mobile format friendly.
1. At the end of the video we do not want "related videos" to appear. Rather no videos or only your YouTube channel videos. In order to accomplish this, we will need to add the code ?rel=0 after the unique video number and before the quotations, as outlined below:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UniqueNumber12345?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Also, you can easily vary the size of the video by adjusting the width and height at the beginning of the code. If you do this please make sure you keep the aspect ratio the same so the video remains 16:9, irregardless of its size. (i.e. To make the video smaller one could change the width="560" height="315" to width="450" height="259").
In order to embed your video on a website using the Standard YouTube format you will have to:
1. First upload your 16:9 video to your YouTube channel.
2. Launch the video's URL and select the share icon below the video and then select the embed code (< >)
3. Enable (check the box) "Show Player Controls"
3. Edit the YouTube embed code according to the below specifications.
When you copy your embed code it will be similar to the embed code below (as of 2/20/23). Note that the frame width and height may vary:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UniqueNumber12345" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
We want to do one thing to the code to make it more mobile format friendly.
1. At the end of the video we do not want "related videos" to appear. Rather no videos or only your YouTube channel videos. In order to accomplish this, we will need to add the code ?rel=0 after the unique video number and before the quotations, as outlined below:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UniqueNumber12345?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Also, you can easily vary the size of the video by adjusting the width and height at the beginning of the code. If you do this please make sure you keep the aspect ratio the same so the video remains 16:9, irregardless of its size. (i.e. To make the video smaller one could change the width="560" height="315" to width="450" height="259").
If you have any questions please do not hesitate to contact us at support@moblio.io