An alternative to removing related videos in a YouTube iframe

The problem

The WiniLogis Ocean Freight detail page was playing a YouTube video through an iframe.

While the service was running, I got this QA feedback:

"Can't we hide that More videos thing? Those videos have nothing to do with our service."

When the video was paused, or when you clicked the More videos area at the bottom of the player, recommended videos completely unrelated to the service were showing up.

I had run into a similar problem before, and I remembered handling it back then by covering the recommended video area with a hardcoded overlay.

In a responsive layout, though, the player size keeps changing, so simply covering the area did not feel like a good approach for maintenance either.

So I looked for another way to solve it and came across the rel=0 option.

The fix

Instead of hiding the recommended video area itself, I approached it from a different direction: "Can I limit it so only related videos show up?"

While searching, I checked the official YouTube documentation.

https://developers.google.com/youtube/player_parameters

YouTube Embedded Players and Player Parameters | YouTube IFrame Player API | Google for Developers

In the documentation, the rel=0 option was defined like this:

In other words, you can no longer remove the recommended videos themselves, but with the rel=0 option you can limit them to videos from the same channel as the current video.

Fixed code

1<iframe src="https://www.youtube.com/embed/9WFnxyopdhc?autoplay=1&rel=0" />

As a result, only videos from the WiniLogis channel appear in the recommendations area, which improved the problem of videos unrelated to the service being shown.

Before / After