position video in video-wrap

Question

Thanks for this nice template.

In a content section I'm using
video class="lazy d-block w-100"
within a video-wrap. The video shows persons.

On a 16:9 display the heads of the persons get cut off since the video is centered in the video-wrap. To avoid this I want to position the video not y-center but at the y-top of the video-wrap. This way only the lower part of the video will be cut off which would be ok.

I did it in a similar way with the background images in the slider. But I can't figure it out with the video.
Do you have any suggestions?
Thx

SemiColonWeb · Accepted Answer

Hello,

You can simply use the following CSS Code:
[ch_pre type="css"].video-wrap video {
top: 0 !important;
}[/ch_pre]

This will ensure that the Video stays on the Top. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

rimash · Answer

Thanks for your answer. Unfortunately this does not work in my case. Dev Tools show that the style has been overwritten to:

style="top: -285.219px; width: 1903px; height: 1070.44px;"

Please check the modified layout. Do I have to make a change in js?

rimash · Answer

The reason for the overwritten style top is maybe the class lazy.

Semicolon Web · Answer

The CSS Codes provided should work fine as we have tested it in our DEV Files. Can you please update the Codes online and provide us with a Live URL for the same, so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

rimash · Answer

Thanks for your reply. The code is updated in live url: https://screenpulse.de/videoproduktion layout.php Style is still overwritten to top: 105.219px on 4:3 display.

Semicolon Web · Answer

We have checked out your Page but could not find the CSS Codes we have provided you with above. Can you please point to us where the CSS Codes have been added so that we can determine why this is not working? Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.