The videos have the class tag but no class assigned. They also don’t have an ID, which might sometimes make sense.
I’m trying to have a video play as soon as it enters the viewport and then pause automatically as soon as it leaves the viewport. Unfortunately, I can’t address any ID or class with Javascript, only all video tags, which unfortunately doesn’t work either… It might be a nice option if you can insert that.
In addition, some of the styling that I put on the video using %root& video {} is sometimes not displayed in the builder.
And I sporadically don’t see the videos on iOS devices.
Tested on several WordPress installations.
It behaves very strangely. I put a video in it without styling, then it works. Then I adjust, for example, the aspect ratio and set the video to position:relative and remove the padding 0.
I see the video on the desktop but not on iOS.
If I then remove the styling again, i.e. return it to its original state, I still don’t see the video.
Is this related to the empty class tag?
If I can’t customize the video using CSS, I don’t see the video in full size on iOS devices or on the desktop, but is cut off on the left and right.
// EDIT:
Dunno why but its working now… Strange
Hi Tobias,
Thanks so much for your report!
I’m not quite sure if you want to achieve this with an interaction or with custom JS, but:
[data-script-id="ELEMENT_ID"] video or one of the classes that you add to the video element:I can’t understand your styling problems. Can you provide a live link?
Best regards,
timmse
Hey @timmse,
I have already solved it with an observer so that the video plays automatically when the viewport is entered.
Sure here is a Link
But I’ve already solved it!
Padding top = 0
and the video in it position absolute.
If I leave it default, I have a black bar at the top and bottom and the format doesn’t fit.
But my primary concern is the empty class as shown in my screenshot. You should look there. I can solve the other thing with CSS.
btw, I don’t have an empty class when I activate Plyr!
Thanks for the highlight, the empty CSS class is normal behavior if you didn’t set custom player Plyr and using Bricks lazyload.
Initially, there is a CSS class .bricks-lazy-hidden on the video tag. As long as Bricks Lazyload is triggered, the class will be removed via JavaScript and so the class attribute will become empty.
Regards,
Jenn
