YouTube updated UI and rethinking using embeds for various video solutions

Posted 3 hours ago

Over the past few months, I have subtly noticed some changes in the YouTube player UI. It was first brought to my attention when I received an Asana issue. On the Revive Our Hearts website, we have an event toolkit which helps equip ministry leaders to bring Biblical teaching to their next conference, retreat, or small group event. We have organized the messages by theme to help these leaders tie together similar teaching.

YouTube Playlists

On these theme pages, we have put together a couple of different playlist options. Once the user chose a playlist, they were directed to a page with links to the different videos on the playlist along with an embedded player. The player came from a playlist.

When the pages were created, the way that the playlist video players would work is the first video of the playlist was loaded and then you could click on a menu item that was part of the player UI to choose another video from the playlist. A previous developer had added a UI element to the page to help explain how this worked to the Revive Our Hearts users.

The reason that I had an Asana task was that the YouTube player UI no longer had that option to choose other videos on the playlist to view within the embedded player. I deduced that YouTube had recently made changes to the UI of the player (I noticed newly designed icons and other visual changes that tipped me off). As I did some research into how playlists now worked, I discovered that you can no longer choose other videos. The way it now worked was it loaded in the first video and then would play the other videos in succession after the current video was done playing. (This is how it worked a couple of months ago when I had to address this issue. I checked again today and it still works this way.)

Because of these changes to the YouTube UI, I decided to refactor the page in our toolkit to list all the videos on the playlist page on our site instead of having the playlist video embed from YouTube. This would make it easier for our users to access these videos when they were using them in their events.

Change in the way embedded videos are displayed

I came across another issue recently when working with an agency I freelance with. Their client was using a video as a background video in the hero of their website. They were using the free plan on Vimeo at the time and wanted to explore moving to YouTube. I worked on a solution to switch over to YouTube using the embed code that YouTube provides through their share button (see screenshot below).

But I noticed that the YouTube UI (video tittle, play button, restart, and more videos) would display when the video first loaded and then would disappear after a few seconds. I had included the parameters in the video code that I have used in the past to hide the UI. But it seems that YouTube has made changes and I have not yet been able to find documentation on how to hide the YouTube player UI.

This change from YouTube is not want you want for this use case of using a video as a background for a page element. I decided to do some further research. I thought I would try embedding the video using the YouTube Player API. I thought it might work a bit differently than just using the embed code that YouTube will give you using the “Share” button on their site.

Same result. The screenshot from above was taken using that method. I also checked videos that I was embedding on the Revive Our Hearts site as “preview” videos and I noticed the same issue of the UI showing when the video first loaded (these videos are also using the Player API). I also observed the same behavior if played a video in one tab, switched to another tab, and then came back to the tab where the video was playing. The UI appears again when I switched tabs.

Conclusion

What I determined from these experiments is that if you are wanting to play videos as background videos for a page element or want to have a video preview inline in your page, YouTube embeds are not the way to go. Unless they offer a way to hide their UI, they are no longer a viable solution.

Vimeo or self-hosted mp4 videos would be a much better route to go. Of course, one of the reasons we use YouTube or Vimeo are because the videos are streamed from their servers, which are optimized for video streaming. Self-hosting the videos and using the <video> element may not be a preferred option because of the performance hit depending on how you are serving the video.