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.
If you require the video to be larger in width, simply update the max-with property to a higher pixel width.
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>
6. Disable Full Screen
To disable the full screen button use this code:
&fs=0
The full code should look like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ&fs=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>
7. Set an Alternative Video Start Point
To start a video from a different place instead of the beginning use this code:
&start=10
The full code should look like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ&start=10" 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>
Do remember to change the starting number to your preferred starting position.
8. Set an Alternative Video End Point
To have your YouTube video end at a certain point instead of the end, use the following code:
&end=15
The final output should look something like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=hKoPQ0ghd02Csncq&end=15" 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>
9. Set User Interface Language
To set the user interface language add this code:
&hl=DE
The full code should look like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=eFjEW_vfFwHydsLZ&hl=DE" 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>
Here, we've used DE, but you can add any country code like EN or ES as you require.
10. Loop
To loop your YouTube video so it replays after it ends, add the following code snippet to your embed code, ensuring the playlist equals to your video's id. The playlist id to replace is just after &playlist= and before the next & symbol.
- &playlist=fxxq46AuOZY&loop=1
Your video's id can be found in the original embed code, it is located just after embed/ and before the ? symbol.
Your embed code should look something like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/fxxq46AuOZY?si=hKoPQ0ghd02Csncq&playlist=fxxq46AuOZY&loop=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>
Third-Party Tools for YouTube Embeds
While YouTube provides a basic embedding process, there are numerous third-party tools available that can simplify and enhance your YouTube embed experience. These tools often offer additional features and customization options that go beyond what is possible with the standard embed code.
Here are some popular third-party tools for YouTube embeds:
Embedly provides a simple and flexible way to embed content from various sources, including YouTube. It offers features like responsive embeds, custom styling, and analytics.
oEmbed is an open standard that allows you to embed content from various services, including YouTube. It provides a consistent API for embedding content across different platforms.
This WordPress plugin offers advanced customization options for YouTube embeds, including the ability to add captions, annotations, and custom thumbnails.
Onetools is a website that offers free web developer tools, including a YouTube Custom Embed Code generator. This tool allows you to easily create YouTube embeds with custom sizes, autoplay options, and muted sound.
When choosing a third-party tool, consider your specific needs and the level of customization you require. Some tools may offer more features than others, while others may be easier to use.
Wrapping it Up
By effectively embedding YouTube videos, you can add a visual element to your content, increase engagement, and drive traffic to your website. Remember to consider your website's design and user experience when customizing your embeds. Experiment with different techniques and find what works best for you.
With the knowledge and tools provided in this guide, you're well-equipped to create visually appealing and functional YouTube embeds that will enhance your website's overall impact. So go ahead, start experimenting, and let your creativity shine through!
