Vooplayer and 'Z'-index - Support | Kriesi.at

Tagged: z-index

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
August 15, 2018 at 9:49 am #997478

medi-paper
Participant

Hi, I was looking for VooPlayer plus Enfold as I am too experiencing issues as posted here: https://kriesi.at/support/topic/vooplayer-code-being-changed-upon-save/

I have put some links in the private content, to show what I am experiencing:

Issue 1: there is a black border around the video (only when playing) that should not be there and is nowhere specified, I am using the latest up-to-date safari browser on a fully up-to-date MacOS computer;
Issue 2: on iOS Safari (again latest safari and latest iOS) there is an issue causing the rest of the page to scroll under the video. The video is sort of opaque.

I have contacted VooPlayer support and they indicated that (this text is copy-pasted from their message to me):
Hi there, was able to troubleshoot a bit more, confirming the originally suspected theme conflict.
Unfortunately, not able to directly help you out with this aside from pointing out where the issue is
<<see link in private content>>

the theme you are using has z-indexes all over the place, what needs to be realigned that all of the parents of the video element to have the higher z-index then their siblings. as you can see in my video, z-index of the video is being overwritten by another element, or elements

August 16, 2018 at 6:29 am #997793

Ismael
Moderator

Hey Medical,

Thank you for using Enfold.

Where can we see the issue? I can’t find the actual url from the screenshots and videos.

Best regards,
Ismael

August 16, 2018 at 6:33 am #997799

medi-paper
Participant

Hi Ismael,
Thanks for helping once more.

Please see the private content for the link.

Cheers

August 17, 2018 at 3:43 am #998227
Ismael
Moderator
Hi,

Thank you for the update.

1.) The iframe container and the actual video have the same width (771px), so I’m not really sure where the black border is coming from. What’s the aspect ratio of the video? Please contact the plugin or script authors for additional help.

2.) Add this css code to move the “video” section higher up the stack.
```
#video {
    position: relative;
    z-index: 1000;
}
```
Best regards,
Ismael
August 17, 2018 at 4:23 am #998229

medi-paper
Participant

Hi Ismael, I have reverted back your question on the video aspect ratio to VooPlayer support. I’ll let you know once I hear back from them.

With regards to the CSS, I have implemented (see private content) and moved the code up all the way to the top of my CSS.
It works, with the exception of the arrow of the colour section pointing down, which is persistent through the video? Any solution except for removing the arrow?

August 18, 2018 at 11:28 am #998678
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:28 am #998679
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998680
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998681
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998682
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998683
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998684
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998685
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998686
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998687
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 18, 2018 at 11:29 am #998688
Dude
Participant
Hi,

You can try to reduce the z-index of the arrow with css code:
```
#top #wrap_all .scroll-down-link {
    z-index: 1;
}
```
If you want to remove it you can use this code:
```
#top #wrap_all .scroll-down-link {
    display:none;
}
```
Best regards,
Dude
August 21, 2018 at 3:17 am #999657

medi-paper
Participant

Thanks.

#top #wrap_all .scroll-down-link {
z-index: 1;
}

This did the trick.

August 21, 2018 at 7:45 am #999690

Dude
Participant

Hi,

Great, I’m glad it works now :)

Best regards,
Dude
Author

Posts

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Vooplayer and 'Z'-index’ is closed to new replies.