How to embed YouTube videos in your website

Today, I’ll guide you through the process of embedding YouTube videos into the main visuals of your website.

This method ensures a clean and professional appearance without displaying the default YouTube play button or channel icon, making your site look more polished and reliable.

Who Should Read This Guide?

This tutorial is perfect for:

Web developers looking to embed videos on their sites.
Designers who want to use YouTube videos as the main visual element of a webpage.

Why Embed YouTube Videos as Main Visuals?

Embedding YouTube videos as the main visual element of a website can significantly enhance user engagement and convey your message more effectively. However, simply embedding a YouTube video via an iframe can result in unwanted elements like the play button and YouTube branding being displayed, which can detract from the overall visual appeal of your site.

In this guide, I’ll show you how to integrate a YouTube video seamlessly into your website’s design using YouTube’s IFrame Player API.

Step-by-Step Implementation

To embed YouTube videos effectively, we’ll use the YouTube IFrame Player API. This API allows you to control the embedded YouTube player, offering functionality like autoplay, custom controls, and more.

What is the IFrame Player API?

The IFrame Player API is a tool provided by YouTube that allows developers to control YouTube’s embedded player via JavaScript. With this API, you can implement features such as play, pause, and volume control directly on your website.

Here’s a simple example to get you started:

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embedding YouTube Videos as Main Visuals</title>
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
 <div class="c-mv">
 <div class="c-mv__container">
  <h1 class="c-mv__title">Campfire By The River</h1>
 </div>
 <div id="youtube" class="c-mv__video"></div>
  <div class="c-mv__mask"></div>
 </div>
 <script src="./index.js"></script>
</body>
</html>

Customizing the Appearance with CSS

To ensure your video fits seamlessly into your site, you’ll need to style the container and overlay elements using CSS. Here’s how:

.c-mv { 
aspect-ratio: 16/9; 
height: auto; 
position: relative; 
width: 100%; 
}

.c-mv__container { 
align-items: center; 
display: flex; 
height: 100%; 
justify-content: center; 
padding: 40px; 
position: relative; 
width: 100%; 
z-index: 1; 
}

.c-mv__title { 
color: #fff; 
font-size: 32px; 
font-weight: 700; 
margin: 0; 
}

.c-mv__video { 
bottom: 0; 
height: 100%; 
left: 0; 
overflow: hidden;
 opacity: 1; 
position: absolute; 
right: 0; 
top: 0; 
width: 100%; 
z-index: 0; 
}

.c-mv__mask { 
background-color: rgba(0, 0, 0, 0.2); 
position: absolute; 
left: 0; 
height: 100%; 
top: 0; 
width: 100%; 
z-index: 2; 
}

Adding JavaScript for Functionality

To make the video play automatically and loop after it ends, here’s a JavaScript snippet that leverages the IFrame Player API:

var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player("youtube", {
    videoId: "Ftm2uv7-Ybw",
    playerVars: {
      playsinline: 1,
      autoplay: 1,
      fs: 0,
      rel: 0,
      controls: 0,
      modestbranding: 1,
      iv_load_policy: 3,
    },
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange,
    },
  });
}

function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    event.target.playVideo();
  }
}

Understanding the Code

The HTML structure is straightforward: it includes text elements, a container for the YouTube iframe, and a masking element to prevent direct interaction with the iframe.

The CSS styles the video and its surrounding elements to ensure they fit perfectly within your webpage’s design.

Conclusion

Embedding a YouTube video as the main visual of your website can dramatically enhance its appeal. By using the YouTube IFrame Player API, you can create a seamless and professional-looking video integration that is sure to engage your visitors.

I hope you found this guide helpful and that you’ll give it a try on your own site!

YouTube IFrame Player API reference