Vimeo-Einbettungen haben auf Mobilgeräten zu viel Weißraum

Beim Einbetten von Videos durch Einfügen der Vimeo-URL ist auf mobilen Geräten zu viel Weißraum ober- und unterhalb des eingebetteten Videos vorhanden.

Überprüfen Sie diese URLs auf einem mobilen Gerät, um das Problem zu reproduzieren:

https://try.discourse.org/t/testing-video-embeds/1369

Screenshots:

3 „Gefällt mir“

Was hier also passiert, ist, dass unser iframe-Tag eine statische Breite und Höhe hat, sich das eingebettete Vimeo-Video jedoch auf 100 % Breite anpasst und eine automatische Höhe hat.

Das tritt auch bei anderen in Oneboxes eingebetteten Videos auf, sobald man die Wiedergabe startet. Sie gehen jedoch von dieser Größenänderung aus, nutzen daher den gesamten Containerplatz und setzen einen schwarzen Hintergrund.

Hier ist ein Beispiel von Dailymotion:

Ich denke, das Einfachste, was wir hier tun können, ist, dem Vimeo-iframe einen schwarzen Hintergrund zu geben. Es würde dann so aussehen:

Wir benötigen eine statische Höhe, da sonst das Layout beim Laden der Seite zittern würde… Ich bin mir nicht sicher, ob wir etwas Komplexeres tun können oder sollten, wie zum Beispiel das Seitenverhältnis zu bestimmen und die Abmessungen für kleinere Bildschirme anzupassen (@techAPJ)?

3 „Gefällt mir“

Ja, lass uns vorerst einfach den schwarzen Hintergrund nehmen.

Das Gleiche passiert auch bei Streamable.