How can I prevent the automatic addition of a Google Cast button to the Vimeo player on my production website, specifically in Chrome, while this issue doesn't occur in my local development environment?

I have a puzzling problem with my website’s Vimeo player integration. When I visit my production site in Chrome, the Vimeo player instantly gets a Google Cast button. It’s peculiar that this issue is unique to Chrome and isn’t present in my local development environment.

I’m eager to figure out how to stop users from seeing the Google Cast button when they visit my production site’s Vimeo player. It is imperative to preserve a uniform user experience and steer clear of introducing any unforeseen components to the player interface.

Right now, I’m playing videos in a React component using the @vimeo/player module.

1 Like

Yeah! it can be confusing when a Google Cast button appears on the Vimeo player in Chrome, only on the production website and not in the local development environment.

Let’s explore some ideas and perspectives to address this problem

Solution 1: Configuring the Vimeo Player

Examine your Vimeo player configuration first. There are occasionally options in Vimeo’s embed settings to turn off particular components or functionality. It’s likely that the Google Cast button has an option that can be disabled. If this behavior is out of control, check the configuration options you are using to embed the player.

Solution 2: Make use of the JavaScript API on Vimeo

Try using Vimeo’s JavaScript API, which can be accessed via the @vimeo/player library, if the default setup isn’t working. More control over the player’s settings and features is available with this API. Investigate any API methods that would let you change the Google Cast button’s visibility. Usually, this can be done by changing the player instance’s behavior using API calls.

Solution 3: Focused CSS Styling

It’s a positive move that you made an initial attempt to hide the Google Cast button using CSS. But occasionally, a more focused strategy is required. To get the button element’s class or ID, use the developer tools in your browser. Next, write CSS rules that are particularly directed to that element.

It may be necessary to use! important in your CSS declarations to guarantee that your rules take precedence.

I hope this may help you.

1 Like

The Vimeo player is displaying the Google Cast button, and I’m having a similar problem. I’ve attempted to conceal the button using the Vimeo JavaScript API, but I’m not sure which approach to take.
Is there someone who can advise me on which particular API call to use?

1 Like

Using the Vimeo JavaScript API is the proper course of action. The setOption method offered by the API can be used to regulate the Google Cast button’s display. The Chromecast option is the one you should aim for and set to false. Here’s an illustration of how to apply it:

// Assuming you have a Vimeo player instance

const player = new Vimeo.Player(/* your player options here */);

// Use the setOption method to hide the Google Cast button

player.setOption('chromecast', false);

This will turn off the player’s Google Cast button. Try it out and see if it fixes the problem for you.

1 Like

Thank you so much Gumlet community for your help.