4 YouTube Embed Customisations: Related Videos, Corners, Edges

This article covers four customisations for embedded YouTube videos.

The short answer: you cannot hide related videos. The rel parameter only limits them to the same channel, and that is the ceiling of what the API allows. Rounded corners, the black edge and the play button are all solvable with CSS and JavaScript.

The four topics covered here:

• Limiting related videos
• Rounding the corners of the embed
• Hiding the black edge
• Building your own play button

These came out of a real client request. The article was revised in September 2026 to reflect the current parameter behaviour and to update the CSS to modern syntax.

Limiting related videos

There is no way to turn related videos off. The rel parameter only controls where they come from.

Until September 2018, adding rel=0 to an embed hid related videos entirely. The October 2018 change redefined what the parameter means.

▼What rel does now

This is still the behaviour as of September 2026.

Getting to zero related videos anyway

Use the “same channel only” rule against itself. If the channel holds exactly one video, there are no other videos to show.

In practice that means creating a channel used only for site embeds, uploading a single video to it, and setting rel: 0. It does not work on an existing channel with a back catalogue, so the separate channel is the prerequisite.

What the IFrame Player API is

The IFrame Player API lets you control a YouTube player from JavaScript. A static iframe cannot be played, paused or seeked from your own code.

With the API you create the iframe from JavaScript and then call methods on the player. The related-videos setting is passed in at creation.

The code

Copy this and replace videoId with your own.

<div id="player"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
let player;

function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		width: '640',
		height: '360',
		videoId: 'YOUR_VIDEO_ID',
		playerVars: {
			'rel': 0,          // limit related videos to this channel
			'playsinline': 1,  // play inline on iOS
			'controls': 1,     // show player controls
			'origin': location.origin
		}
	});
}
</script>

A working example:

The channel used in that example holds a single video, so no related videos appear when paused or after playback ends.

Parameters worth setting

Always set origin. It is the security measure for API-enabled embeds.

▼Common playerVars

Do not use modestbranding. It was widely used to play down the YouTube logo, but it was deprecated on 15 August 2023 and now has no effect. Older guides still list it.

To reduce cookies set for the viewer, embed from www.youtube-nocookie.com instead. For static iframes, adding loading="lazy" keeps the embed from slowing down the initial render.

Rounding the corners of the embed

Apply border-radius. Putting it on a wrapper with overflow: hidden is more reliable than putting it on the iframe.

iframe {
	border-radius: 16px;
}

The wrapper version clips the iframe’s contents properly and avoids the black-edge problem covered next.

<div class="yt-wrap">
	<iframe src="..." title="Video title" allowfullscreen></iframe>
</div>

.yt-wrap {
	border-radius: 16px;
	overflow: hidden;
	/* keep 16:9 while staying fluid */
	aspect-ratio: 16 / 9;
	width: 100%;
}

.yt-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

aspect-ratio replaces the old padding-top: 56.25% pseudo-element trick entirely, and every major browser supports it.

Hiding the black edge

After rounding the corners, a hairline of black can remain outside them. The embedded document has background-color: #000; set on its own side.

That background belongs to YouTube’s document, and you cannot override it: the iframe contents are a different origin, so your CSS never reaches them.

Two ways around it:

Try the first; use the second only if an edge still shows somewhere.

Building your own play button

Anything layered over the video intercepts clicks, so YouTube’s own play button stops working. The fix is to make the overlay the play button.

This is the side effect of the border technique above: the covering element receives the click instead of the player underneath.

Call the IFrame API’s playVideo() and pauseVideo() from the overlay:

const overlay = document.querySelector('.yt-overlay');

overlay.addEventListener('click', () => {
	const state = player.getPlayerState();
	// 1 means playing
	if (state === YT.PlayerState.PLAYING) {
		player.pauseVideo();
	} else {
		player.playVideo();
	}
});

If the overlay is purely decorative, let clicks pass through it instead:

.yt-overlay {
	/* decoration only: let clicks through */
	pointer-events: none;
}

What to keep in mind

Everything you can control on a YouTube embed lives outside the iframe. Any change to what is inside it has to be faked from the outside.

That is why related videos can only be handled through channel structure, and why the black edge has to be covered rather than removed.

It also means YouTube can change the rules underneath you. rel changed meaning in 2018 and modestbranding stopped working in 2023. On work that has to keep running after handover, depend on as few parameters as you can.

For an effect that ties visual changes to scroll position, see 5 ways to change colour on scroll, which pairs well with a video section that shifts its background.