Did you know that over 2 billion people use YouTube every month? That's a lot of potential viewers for your content! To make the most of this platform, it's essential to understand how to effectively embed YouTube videos into your website or blog. While YouTube offers a simple embedding process, there are countless customization options available to enhance the viewing experience and match your website's style.
Now if you are wondering how to create visually appealing and functional video integrations, even if you're not a coding expert, look no further. This article is all about breaking down the basic embed code and its components, and showing you how to customize various aspects of the video player, such as its size, autoplay behavior, and appearance. Without further ado, let's start it:
Understanding the Basic Embed Code
To get a YouTube video's embed code, go to the video, then click on the share button followed by embed.
A standard YouTube embed code typically looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
The key components to be aware of here are:
- width and height: These attributes specify the dimensions of the video player in pixels. Adjusting this code will change the height and width of the video.
- src: This attribute contains the URL of the YouTube video you want to embed. Changing this to another YouTube video's URL will load that video instead.
Customizing the Embed Code
Now, let’s say you want to customize your embedded video, to do this you can modify the original embed code to suit your taste. Below, we'll take you through the simple steps on how to do this.
1. Custom Styling
Starting off with some custom styling for the video player the standard embed code remains the same, but we add the following style code into it, to generate customized styling.
style="border:2px solid #3399ff; border-radius:10px; box-shadow:0 0 10px rgba(0, 0, 0, 0.5);"
- border: Creates a border around the video player.
- border-radius: Rounds the corners of the video player.
- box-shadow: Adds a subtle shadow effect around the video player.
After adding the above style code into your embed code, it should look like this:
<iframe style="border:2px solid #3399ff; border-radius:10px; box-shadow:0 0 10px rgba(0, 0, 0, 0.5);" width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ&autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
You can see everything in the standard embed code has remained the same, except the style code has been added to the beginning of the iframe element.
The output should look something like this:
There is a huge variety of styling code you can apply to your YouTube videos, see if you can play around with the style code and get your videos displaying exactly how you want.
2. Auto Resize on All Screen Sizes With Aspect Ratio
Using the standard YouTube embed code will display the video nice and neat on desktop/laptop screens. Unfortunately, this is isn't the same for mobile view, due to the set width and height within the code. Changing the width and height to better suit mobile view can be done, however, it then won’t display properly on desktop view.
This is where some basic coding skills can help, we can update the embed code to have the video dynamically fit on all screen sizes. In the original YouTube embed code, we can see the width and height is set to:
width=”560” height=”315”.
Delete the width and height code, then paste in the following code:
style=”width:100%; max-width:”560px” aspect-ratio: 16 / 9”
Your embed code should now look like this:
<iframe style=”width:100%; max-width:”560px; aspect-ratio: 16 / 9;” src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Using this modified code will ensure the video displays based on the width of the screen, whether it is a small mobile screen or a large desktop screen, the video will automatically scale up or down in size.
This works brilliantly with landscape videos. For portrait videos, adjust the code to look like this:
<iframe style=”width:100%; max-width: 320px; aspect-ratio: 9 / 16;" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
The code has been slightly amended, the max-width and the aspect ratio has been changed to suit portrait videos instead of landscape videos.
With these minor code changes, your videos will look beautiful for your site visitors on both desktop and mobile devices.
We have also prepared a video demonstration, detailing the change required to achieve this.
3. Auto Play and Mute
You can add these attributes to your embed code to play the video automatically as soon the webpage loads and mute the sound.
- &autoplay=1: This tells the video to automatically play when the page loads.
- &mute=1: This instructs the video to mute the sound by default.
In the embed code below, the src attribute containing the YouTube video URL has been modified slightly, it now has the two additional parameters shown above added to the end of the URL.
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ&autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
The mute code is necessary for the video to play automatically as browsers such as Google Chrome prevent videos from playing with sound automatically, this is to enforce a better site visitor experience.
4. Progress Bar Color
The video player's progress bar color is originally red. To set it to white color, the following code can be added to the embed video's URL located within the src attribute.
&color=white
The full code will look something like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ&color=white" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
5. Controls
As standard a YouTube video's embed code will automatically display the video player's controls such as the play, pause and volume buttons.
To remove the video player controls, add the following code to your YouTube embed code:
&controls=0
The full code should look like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>