Tips and tricks

Customize the Player Play Button

Start with the current player preset and appearance controls. Presets keep colors, skin, controls, and behavior consistent across projects and are less likely to break when player markup changes. Use the CSS technique below only for a compatible legacy skin whose generated embed exposes the documented class.

Preferred workflow

  1. Open the player preset used by the project.
  2. Choose the available skin and appearance settings.
  3. Save the preset and verify it on one published video.
  4. Test desktop, mobile, keyboard focus, and high-contrast viewing before applying it broadly.

Scoped legacy CSS override

CSS
.my-dyntube-embed .dyt-big-touch-play-button {
  border-radius: 12px !important;
}

Add my-dyntube-embed to a wrapper around the intended player so the override does not affect every compatible player on the site. Increase border-radius for a rounder appearance. Keep the button's visible focus, contrast, hit area, and hover states intact.

Know the maintenance boundary

The class is an implementation detail of compatible legacy skins rather than a stable public theme API. A player update or different skin may stop matching it. Record the override in your site's customization documentation and retest it after changing player presets or embed versions.

Troubleshooting

  • Inspect the published iframe and confirm the selected skin supports the class.
  • Check whether site or iframe boundaries prevent host-page CSS from reaching player markup.
  • Confirm another rule is not overriding border-radius with higher specificity.
  • Remove the custom rule and verify the preset itself before debugging several overrides together.

Something missing or wrong here? Tell us and we will correct it. New to DynTube? Start with uploading and embedding.