Individueller Ausschnitt für eingebettete Videos

  • Hey Leute,


    ich würde gerne ein Video aus YouTube auf eine Seite einbetten und den Ausschnitt so gestalten, dass das Video in die volle breite geht, aber nur eine höhe von 700px hat, welches dazu noch automatisch abläuft und im loop läuft. Dazu habe ich mir schon etliche Tutorials durchgelesen und angeschaut, aber leider haben die alle entweder nur gezeigt wie man ein Video einbettet oder sie haben Videos aus deren src verwendet. Das ist bei mir leider nicht möglich, da dass Video 1 Minute lang ist und so zu groß ist um diesen als src Datei in die Website einzubinden.



    Danke schon mal im voraus! :)

  • Ich schicke mal noch den html- und den css-code hier rein, vielleicht hilft das weiter.

    HTML
    1. <div class="video-background">
    2. <div class="video-foreground">
    3. <iframe class="objectfit" src="https://www.youtube.com/embed/sHXdKJ5SjaY?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1&playlist=sHXdKJ5SjaY" frameborder="0"></iframe>
    4. </div>
    5. </div>
  • Dann ändere mal deine src woher hast du den? YouTube gibt folgendes aus

    <iframe src="https://www.youtube.com/embed/sHXdKJ5SjaY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Musst dann halt noch die Eigenschaften anhängen die du willst.

  • Also ich habe mal beim suchen einen Beitrag gefunden wo gezeigt wurde, dass es genau so funktioniert wie bei einem Bild welches man mit object-fit anpasst ohne dass es sich verzerrt.

    Aber in dem Beitrag wurde nicht mit einem eingebetteten Video gearbeitet, ich kann euch gerne hier einen Link hier reintun wo ich es gesehen habe.


    Meine src habe ich nach einem Tutorial angepasst, da ich es damals in Vollbild-Format gebraucht habe. Aber wenn ich es wieder von YouTube kopieren würde, würde der iframe-code genauso aussehen wie bei dir.


    Ich weiß dann jetzt nicht welche Eigenschaften ist anhängen muss, kenne mich leider nicht so sehr damit aus.

  • Zitat

    wo gezeigt wurde, dass es genau so funktioniert wie bei einem Bild welches man mit object-fit anpasst ohne dass es sich verzerrt.

    Ja, aber wenn es sich nicht verzerrt, muss man entweder cover nehmen, dann wird etwas abgeschnitten oder contain, dann bleibt Luft.


    object-fit funktioniert nur mit ersetzten Elementen, wie Bildern und Videos, siehe hier:

    https://wiki.selfhtml.org/wiki…ige/object-fit#object-fit

    Ob iFrame dazu zählt, weiß ich nicht genau.

    Man kann aber mit Javascript die richtigen Abmessungen berechnen und zuweisen.

  • Das etwas abgeschnitten wird ist nicht so schlimm. Mir geht es nur darum, dass das Video auf die volle Bildschirmbreite geht, aber trotzdem eine höhe von 700px hat.


    Leider habe ich von JavaScript gar keine Ahnung, kennt Ihr ein Tutorial womit ich arbeiten könnte oder könnt Ihr mir da im besten Fall aushelfen?