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.

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

.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
}

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#vidtop-content {
  top: 0;
  color: #fff;
}
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

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

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.

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?