Video.js: Add custom Class to Video Element

[stephanedemotte]

Hi !

Can we add custom class to the video element ?
In this doc : http://docs.videojs.com/docs/guides/components.html
We can't target the video tag.

Thanks !

[Soviut]

The <video> tag is intentionally obfuscated because it could be swapped out for a flash player depending what tech you support.

Instead, you'll have to use some javascript to get at it.

// use queryselector to find the child video element
var videoElement = player.el().querySelector('video');

// if one is found, we're using html5 tech, so add a custom class
if (videoElement) {
    videoElement.classList.add('my-custom-class');
}

[gkatsev]

Why do you need to add a class to the video element itself? Would adding it to the player element not be sufficient?
Can you elaborate on the usecase? Thanks.

[stephanedemotte]

i need to use the css property "object-fit: cover" on it.
If i use it on its parent, the method don't work as expected.

I can target the video in css with

.video-js video { object-fit: cover }

but i have some JS to replicate this comportement on IE (because he don't have object-fit)

I have use the @Soviut logic to get it.

Thanks !

[gkatsev]

Yep, in that case both things suggested above are recommended. Glad you got it figured out.