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 hätte vielleicht noch erwähnen sollen, dass das Video auf die volle breite des Bildschirms gehen und auch so bleiben soll. Leider bleibt dieser nicht so wenn die die height auf 700px ändere.

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

    HTML
    <div class="video-background">
                <div class="video-foreground">
                  <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>
                </div>
    </div>
  • ich würde die Höhe auf 700px setzen bei


    .video-foreground


    und diese Anweisungen rausnehmen


    @media (min-aspect-ratio: 16/9) {

    video-foreground { height: 300%; top: -100%; }}

    @media (max-aspect-ratio: 16/9) {video-foreground { width: 300%; left: -100%; }}

  • Hat leider nicht viel gebracht, das Video ist zwar jetzt auf der höhe, aber immer noch nicht auf der vollen Bildschirmbreite. Das Format des Videos bleibt weiterhin bei 16:9

  • 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?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!