Entferne schwarze Ränder für eine Youtube-Einbettung
Ich versuche, ein Youtube-Video in den Hintergrund meiner Website einzubetten. Ich habe das funktioniert und es reagiert, außer wenn meine einbetten Video Breitbild (16: 9), aber mein Ansichtsfenster ist zum Beispiel quadratisch (1: 1), erstellt schwarze Ränder, um den übrig gebliebenen Raum zu kompensieren.
Ich habe mich gefragt, ob es eine Möglichkeit gibt, das Video zu beschneiden, so dass das "Zentrum" des Videos immer auf dem Bildschirm ist, genau wie im obigen Beispielbild. Die übrig gebliebenen Teile würden abgeschnitten werden. Ich denke, das CSS-Äquivalent für Bilder wäre background-size: cover; .
Hier ist der Code, den ich in diesem Moment habe. Versuchen Sie, Ihr Ansichtsfenster quadratisch zu machen und Sie werden die schwarzen Ränder sehen. Es ist auch in einer jsfiddle verfügbar.
%Vor% Ich habe bei Google nach Lösungen gesucht, konnte aber keine finden. Viele waren speziell für <object> und <embed> , mit dem alten Youtube-Embed-Stil. Ich verwende die YouTube-API zum Rendern eines HTML5-Players.
Könnte mir jemand einen Stoß in die richtige Richtung geben?
1 Antwort
Der Player erstellt iframe , in dem das Video mit youtube wiedergegeben wird
Dies stellt ein Problem dar, da Sie die Parameter von Objekten in cross-Domänen nicht ändern können.
Das Objekt, das das Video enthält, ist in player.c.contentWindow.querySelector(".video-stream.html5-main-video")
Einzige Lösung, die ich jetzt ist, Container zu transformieren. bg_utube mit CSS wie diesem
%Vor%Tags und Links html css html5 youtube responsive-design