Youtube-Videos nur Ton wiedergeben (mit Javascript ansteuern/ div über Iframe legen?)

Question

Hallo,

Ich würde gerne Youtube-Videos so in den Fragebogen einbinden, dass die Proband_innen das Video und dessen Beschreibung nicht sehen können, aber den dazugehörigen Ton abspielen.
Dazu hatte ich zunächst überlegt, das Video quasi außerhalb des sichtbaren Bereichs zu platzieren und es dann per Javascript mit einem Klick auf ein anderes Objekt zu starten.
Mit den beantworteten Fragen (z.B. https://support.soscisurvey.de/?qa=966/youtube-video-weiterleitung-verhindern) habe ich herausgefunden, dass das mit dem Iframe-Tag wohl nicht möglich ist. Mit hat es bei mir auch nicht funktioniert, aber das liegt vielleicht auch an irgendeinem anderen Fehler?

In der verlinkten Frage wird am Ende empfohlen "ein transparentes DIV über das iFrame zu legen". Könnte das auch in diesem Fall helfen? Also z.B. in dem man ein Bild darüberlegt? Und wie könnte der dazugehörige Code ungefähr aussehen?

Vielen Dank für Ihre Hilfe!

Answer 1

das Video quasi außerhalb des sichtbaren Bereichs zu platzieren und es dann per Javascript mit einem Klick auf ein anderes Objekt zu starten

Genau - es wird deshalb nicht funktionieren, weil der Fragebogen keinen Zugriff auf den Inhalt des <iframe> hat, über welches das YouTube-Video eingebunden ist. Sogenanntes Cross-Site-Scripting (XSS).

In der verlinkten Frage wird am Ende empfohlen "ein transparentes DIV über das iFrame zu legen".

Dabei ging es nur darum, Klicks in das iFrame zu verhinden. Aber sehen würde man den Inhalt trotzdem...

Vielleicht hilft es in Ihrem Fall, wenn Sie kein transparentes <div> über das Video legen, sondern ein paar schwarze Blöcke, sodass man den Titel nicht sieht. Versuchen Sie mal so etwas in der Art- Bei dem <iframe> setzen Sie den Code vom YouTube-Video ein.

<div style="display: relative; width: 100%;">
  <iframe ...>
  <div style="background-color: black; width: 100%; height: 20%; position: absolute; bottom: 0;"></div>
</div>