Entfernen Sie schwarze Balken von beiden Seiten eines eingebetteten YouTube-Videos

Question

Ich habe ein YouTube-Video auf this webpage eingebettet.

Ich möchte die zwei schwarzen Balken entfernen, die angezeigt werden, wenn ich auf Wiedergabe klicke.

Screenshot hier:

ich auf Stack-Überlauf gesucht und in der Nähe war ich das gefunden, aber es half nicht:

How to remove black bar from the YouTube videos

I So habe versucht, das Video mit folgendem CSS anzupassen:

html5-video-container { 
     background-position: center; 
     background-repeat: no-repeat; 
     width: 100%; 
     height: 100%; 
     left: 0px; 
     top: 0px; 
     position: absolute; 
    } 

    video.video-stream.html5-main-video { 
     background-position: center; 
     background-repeat: no-repeat; 
     width: 100%; 
     height: 100%; 
     left: 0px; 
     top: 0px; 
     position: absolute; 
    } 

Zuerst habe ich versucht, nur das Video anzupassen, dann habe ich versucht, das Video-Container-Element auch zu justieren, aber keiner funktionierte.

Können mir CSS-Gurus bitte helfen?

Ich möchte, dass das Video die gleiche Größe wie das Miniaturbild aufweist, das angezeigt wird, bevor Sie auf "Play" klicken.

Vielen Dank im Voraus.

Answer 1

Dies scheint eher ein Problem mit dem YouTube-Frame als CSS zu sein.

Der YouTube-Frame ist so breit wie die Seite, aber so groß wie das eigentliche Video. Das heißt, es wird viel von extra Platz sein, es muss es mit etwas füllen!

Solange der YouTube-Frame breiter als das eigentliche Video ist, wird es schwarzen Raum geben. Sie müssen das Seitenverhältnis des YouTube-Frames dem tatsächlichen Video anpassen.