Over the past month, I've been enhancing first-time user experience with video players. This has been a great opportunity to discover new UX approaches, especially given the recent focus on video content by platforms like TikTok and Instagram.

For the purposes of this article, I've been using Plyr.io for development. It supports self-hosted HTML5 videos, as well as Youtube and Vimeo.

From a UX perspective, I've noticed a few "autoplay with mute" patterns that make the video more attractive to the end user without disrupting their experience or focus. This is something Twitter has been doing for timeline videos and Facebook for stories. In my case, since the video was educational about the product, after clicking on the video overlay (we kept the controls like the big play button, making it look more like a gif) the video would restart and play with sound. It's a simple, but effective approach.

From an engineering perspective, things are a lot easier nowadays, but interacting with 3rd-party video provider APIs (especially big ones like Vimeo and Youtube) can still be a challenge. Both use iframes to inject the video, which is good for security reasons, but it makes customization a bit difficult. Youtube takes advantage of this and adds a lot of its own branding, which generates organic traffic. This is good for them, but it can be a problem depending on your use case.

Fortunately, a solution was posted on Github.

Youtube positions the iframe using an absolute value for the cover, making it possible to stretch the video height to a level where all the branding (mainly the suggested video panel) disappears.

Here's the CSS snippet that fixed it:

iframe[id^='youtube'] {
  top: -50%;
  height: 200%;
}

This problem started in 2018 when the ?rel parameter was removed, as documented here. This made things more restricted for developers.

Maintaining video size proportion can be challenging, especially when using a library that implements a lot of UI styles for you. On modern browsers, support for aspect-ratio is quite good, according to the MDN docs.

A nice trick prior to this was setting the padding based on a percentage, forcing the layout to preserve the width. This resulted in the following table:

aspect ratio  | padding-bottom value
--------------|----------------------
    21:9      |       42.85%
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

The library was originally designed only to support plain JS, so community packages were created to support newer UI libraries/frameworks. The one recommended on the official library documentation is plyr-react, which allows you to have full control of the video API through a ref. When using this integration, be aware of re-renders. You don't want your video to flicker frames and re-render, so make sure you wrap all your custom props inside a useMemo hook to prevent this.