oveleon/contao-cookiebar

YouTube Elemente im Rocksolid Slider: Vollbild funktioniert nicht

vicotec opened this issue · 13 comments

Hallo zusammen.
Ich habe auf einer Webseite mehrere YouTube-Elemente in einem Rocksolid Slider eingebunden (es werden mehrere Videos gleichzeitig angezeigt). Wenn ich nun in einem der Slides YouTube aktiviere, werden ordnungsgemäß alle iframes mit den YouTube urls versehen. Allerdings kann man nur im angeklickten YouTube-Video den Vollbildmodus aktivieren.
Dies liegt daran, dass in allen anderen iframes die source nicht auf den puren YouTube-Link gesetzt wird, sondern auf:

https://hierstehtdiewebseite.de/cookiebar/block/de/4?redirect=https%3A%2F%2Fwww.youtube.com%2Fembed%2hierstehtdieyoutubeid

Wenn die source ohne redirect geändert wird, kann der Vollbildodus aktiviert werden.

Kennt jemand die Problematik und kennt einen schnellen Fix?

Informationen
Contao-Version: 4.9.21 4.9.31
Cookiebar-Version: 1.11.0 1.12.2
Rocksolid Slider Version: 2.1.3 2.1.8

UPDATE: Ich habe nochmal alle relevanten Pakete auf den neusten Stand gebracht, da ich hoffte, der Bugfix aus 1.12.2 könnte mir helfen. Leider besteht das Problem noch.

Dies liegt daran, dass in allen anderen iframes die source nicht auf den puren YouTube-Link gesetzt wird

Die URLs werden eigentlich so wie sie sind durchgeschliffen, wie genau kommt du zu dieser Vermutung? Sind die HTML-Attribute allowfullscreen etc. entsprechend in allen iFrames gesetzt?

Die HTML-Attribute sind richtig gesetzt und in allen iFrames identisch.
Auf der Webseite https://oldenburg-weltrekord.de/ kann das Problem beobachtet werden:
Nur der iFrame des angeklickten Buttons erhält die korrekte URL.

Nur der iFrame des angeklickten Buttons erhält die korrekte URL.

I cannot reproduce:

image

@fritzmg what browser are you using? I can reproduce this in Chrome 🤔
The button is displayed, but it has no function. This behavior is actually new to me.

I tested in Firefox and Chrome.

I should note that the problem also occurs when loading the page with the YouTube cookie enabled.
If you replace the src in the iframe, e.g. from src="/cookiebar/block/de/4?redirect=https%3A%2F%2Fwww.youtube.com%2Fembed%2FAIbkchsVUyY" to src="https://www.youtube.com/embed/AIbkchsVUyY", the fullscreen button works as intended.

I should note that the problem also occurs when loading the page with the YouTube cookie enabled.

Also cannot reproduce that:

image

Strange, you can really watch the videos in fullscreen? This message does not occur to you?

image

Ah sorry, you are right - it it not possible, yes.

Strangely enough, it works in all our other projects. Could you get the video out of the slider and test it again?

Unfortunately I do need the videos to be in a slider.

Sure, I just want to rule out that there is a problem because of the slider. I honestly don't see any reason right now why it won't work.

Here is a live example where there are no problems:

EDIT: The only difference I can see here is that the www.youtube-nocookie.com URL is used and some parameters are given. Maybe you can check this.

HA, I found the problem!
Previously I added the allow attribute into the iframe, so it looked like this:
<iframe [...] allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowfullscreen=""></iframe>
after removing the allow attribute it works fine:
<iframe [...] allowfullscreen=""></iframe>

I did think that we previously added the attribute to try and fix the problem, but the point is that without it, it does work!
Thank you very much for your help :)

tl;dr:
remove the allow-attribute if you have it in your iframe and add the allowfullscreen attribute if you don't have it.