Webflow sync, pageviews & more.
NEW
Answers

Is there a way to set the modestbranding and color of a YouTube video element in Webflow, either through the UI or via custom code?

In Webflow, you can set the `modestbranding` and color options for a YouTube video element using custom code.

To set the `modestbranding` option, which removes the YouTube logo from the control bar, you can use the YouTube Iframe API and add the `modestbranding=1` parameter to the YouTube video URL. Here's an example of the code you can use:

```html

\`\`\`

Replace `VIDEO_ID` with the actual ID of your YouTube video. You can also adjust other parameters such as autoplay, loop, controls, etc., based on your requirements.

As for the color option, Webflow allows you to set the primary color for YouTube videos in the project settings. However, this option only works for self-hosted videos and not for embedded YouTube videos. So, if you want to customize the color of an embedded YouTube video, you'll need to use custom CSS.

Here's an example of how you can style the YouTube video player using custom CSS:

```css
.w-embed.w-video iframe {
filter: hue-rotate(120deg); /* Adjust the color value as per your preference */
}
```

In this example, the `hue-rotate` filter is used to change the color of the YouTube video player to green. You can experiment with different filter values or explore other CSS techniques to achieve the desired color effect.

To add the custom CSS code, open the Webflow Designer, go to the Page Settings (gear icon), click on the Custom Code tab, and paste the CSS code in the `` section.

Remember to preview your changes to see the updated video style.

Rate this answer

Other Webflow Questions