Text Over hero video

Hey there,

I’ve taken a look but I haven’t been able to reproduce the issue – there’s no overlap when I check in Safari.

Can you post a screenshot of what you are seeing? What version of Safari are you using, and what OS are you on?

Hello @fevered
I am using the following:

OS X EL CAPITAN 10.11.6
Safari 11.1.2
Screenshot here https://imgur.com/BWoPiAW

What do you think? ??

Okay, in that case I suspect it may be due to the Safari version you are using. For reference, I am not seeing the issue and I am using:

OS X Catalina 10.15.2
Safari 13.0.4

Do you have access to test this on a more recent version of Safari?

Hey @fevered ,

I do have access to a more recent version, but only in 12 hours from now. As soon as I test it out, I will post here again letting you know.

Thank you very much for your help with this issue.

@fevered Sorry for the delay answering.
I have since checked a more recent version of the OS and the browser itself and it works fine as you said. BUT it only works on the latest version, I have tried on other catalina version and safari and its still hovering. Is there any solution to this? What I mean is I have developed the website for my current version and at some point in time it did work. Any idea? ??

Thanks for your help and once again I am sorry for the delay.

I’m glad you were able to check! Compatibility can be a tricky issue, since I am not able to see it on my own machine I can’t provide any exact code but I can provide some advice – and perhaps someone else in the community has a similar version and can provide some code.

I know Safari treats video differently than other browsers, and in your case I would recommend coding some CSS specifically for Safari – I found some snippets for that here: https://solvit.io/bcf61b6

My guess here would be that Safari is not treating the video as a block object, which is causing the text to overlap. In your Safari specific CSS, I would either find a way to force the video to be a block object, or add some padding or margins to the text so that it is lower than the video.

@fevered Thank you once again for your answer.
I am going to leave this topic open for a few days to see if anyone can help with code, but I doubt it, since its open for a while now.

Tyvm ??

@fevered I actually ended up managing to do it myself and fixing the problem with this code:

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .entry-content { 
          margin-top: 100px;
        }
    }
}

I did try the code on Solvit.io but it wasn’t working.

Thank you ??

I’m glad to hear you were able to find a solution!