-
Posts
-
Hi everybody here,
today i have two questions:
1:
i have a video background behind a background image working. now the background image (that i set over the video background per css) wont let me interact with the video. Means i cant pause or replay it.
Is there a way to make the background image “invisible” to the mouse ? So it doesnt steal the video interaction2:
on mobile my background video wont play automaticly. Can i change this, so it does ?
when not, how can i set a choosable fallback image instead of showing the video ?kind regards
ingoi do not know how you inserted the background-image over the video – if you can select that container ( maybe a pseudo-container : before; after )
set it to pointer-events: none in your quick cssHi ingo,
I’m not sure if what you are asking for is possible, but send us a link to where we can see the elements in question, and we’ll have a closer look at it.
Best regards,
RikardHi guenni007, thx for getting back to me. Its the way you told me to do it in our last conversation ;-)
Hi Rikard, thank you, too
i have an example here:the video is playing (not on mobile, though) but it cant be controlled, because the background image in front of it hinders it ( i guess ??)
in this place this is the desired behaviour, but i want another place in my homepage, where i want the visitors to control the video behavior ?
Do you understand ?
kind regardsTo clarify:
an autostart of a video is only possible on desktop and muted videos!
on mobile devices the browsers do not autostart even on this setting options.due to that – Enfold does not offer on color-section the interaction with the video at all.
On the video alb element – there are options – and the possibility to have audio. – But on mobile you had to start the video yourself.On your first topic – you said that it has to be not full-width – now you got the fullwidth version ?
What now – is your setting ?If it is possible – your png is not the first choice – because the starting video play button is at that position wher your chess-figure (king) is in front over the film. To have influence in a iframe only to that play-button to have partially a higher z-index – will not be possible.
see again : https://webers-testseite.de/video-behind-a-hole/
with a codeblock element – and the youtube in an iframe – you can have those api settings like:
<div class="video-container"><iframe src="https://www.youtube.com/embed/4XWte6KgpjQ?cc_load_policy=1&enablejsapi=1&loop=1&playsinline=1&color=white&iv_load_policy=3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>the start will work – but a pause and restart not !
see on testpage at the bottom.thx very much for your help.
on the testpage you gave me, all videos work with start, pause, unpause ! Tested in Firefox.
is there a way to have this work in a layer slider with multiple videos ?
i guess not ;-)
but again thx very very much !!yes but mobile not.
I think the fallback image is the right idea on that.create on youtube a playlist and embed that.
_________
Dear fellow participant – I like to help, and in general I am also more patient, but slowly it is time for me to discontinue my support for you until you agree how it should be now. My time is precious, and therefore also expensive!
I do not play here with all the ALB elements for you until it will be in the end only a picture that links to Youtube!
Sorry – but first think – then ask for help.
Thanksi am very gratefull for your help ! its not that i am going back and forth with my wishes. there are different things i want to achieve on different parts of the website, so i am asking these questions. I fully understand if you havent got the time to help me more. So thx again.
IngoBut the principle should have been recognized soon or?
There is no z-index for a background image. Therefore the set image must come somehow into a new container, which then moves altogether by means of z-index a layer higher than the back container. The pseudo-containers “before” and “after” are suitable for this. In principle, they are child containers, but they are independent containers. The trick is to inherit the image to them. This is the meaning of “inherit” the takeover from the parent element. Then you only have to give these pseudo containers their own properties (content, positioning, dimensions, the background image from the parent element via inherit, etc.) So that clickable elements of the parent element remain active, these pseudo elements must be set with pointer-events:none.
- You must be logged in to reply to this topic.