Video über Bild legen mittels HTML Code und in FB einbinden

Question

Liebes Sosci Survey Team,

aufgrund meiner Forschungsfrage muss ich ein Werbe-Video in drei verschiedenen Social Media "Masken" (Youtube, Instagram und Facebook) hochladen - so kann ich evtl. unterschiedliche Wahrnehmungen aufgrund der unterschiedlichen Social Media Platformen untersuchen. Um dasselbe Video in die drei Social Media Masken zu bekommen (mit denselben Kommentaren, Likes etc.) habe ich die drei Hintergrund Masken bearbeitet, sodass Likes etc. sich gleichen. Nun habe ich den Hinweis bekommen, dass ich diesen Hintergrund als Bild hochladen kann und dann das Video mittels HTML an der passenden Stelle darüberlegen. Das sind offenbar gerade mal 6 Zeilen HTML-Code.

Können Sie mir grob erläutern, wie ich das Video über das hochgeladene Bild lege und so in meinen Fragebogen einbinde?

Besten Dank und liebe Grüße

Katharina Seidl

Answer 1

Zum Formatieren von HTML verwendet man am besten CSS - und das erlaubt eine absolute Positionierung. Wennd as Bild "background.facebook.png" heißt und das Video "video01.mp4", dann könnte das Ganze so aussehen:

<div style="position: relative">
  <img src="background.facebook.png">
  <video style="position: absolute; left: 40px; top: 60px;" width="512" height="288" controls controlsList="nodownload">
    <source src="video01.mp4" type="video/mp4" />
  </video>
</div>

Nicht zu viel versprochen mit den 6 Zeilen - puh ;)

Der Trick ist das <div> mit relativer Position "außenherum", weil das als Verankerung für die absolute Positionierung des Videos dient. Und natürlich das position: absolute mit genauer Platzierung für das Video.

Comments

Hey,

mega, vielen vielen Dank für die schnelle Antwort!
Ich habe es beinahe geschafft, bis auf das, dass das Video einfach nicht höher rutschen will in das Bild, egal wie "niedrig" ich   top; ???px   setze. Es bleibt immer unter den Weiter und Zurück Buttons und "berührt" das Bild nicht einmal.
Gibt es allgemein einen Trick, ohne ständiges "Rumprobieren", wie genau die Position ist an der Stelle, wo ich das Video (sowie dessen Größe) haben möchte?

Besten Dank und liebe Grüße!

---

Da war noch ein Tippfehler im Code: `top; 60px;`, das musste natürlich `top: 60px;` heißen (mit Doppelpunkt) - ich habe es oben korrigiert.

---

Super, dankeschön, das klappt super.
Eine letzte Frage noch: wie kann ich das Video automatisch starten lassen, sobald man auf die Seite des Fragebogens kommt?

Vielen Dank und liebe Grüße

---

Sie können ein "autoplay" als Attribut in das `<video>`-Tag aufnehmen (s. Anleitung zu Mediendateien). Auf Mobilgeräten wird das Video allerdings auch dann nicht automatisch starten (Bandbreite sparen).