TikTok Video korrekt in Website einbinden

Ich hattte gerade selbst das Problem und sollte ein TikTok-Video in eine Website einbauen und stellte fest, dass es nicht so gut aussieht mit dem Standard-Iframe Embeding.

Wer ein TikTok-Video in seiner Website einbindet oder auch ein Short von YouTube, wird dann auch bemerken, dass der Player links und rechte einen breiten schwarzen Streifen anzeigt. Das ist normal, denn diese kurzen Clips von TikTok haben ein Seitenverhältnis von 9:16, während der Default-Player auf Websites das Video im Format 16:9 anzeigen will.

Um ein TikTok-Video auf deiner Homepage einzubinden, ohne dass es schwarze Streifen an den Seiten hat, musst du das Video so anpassen, dass es den verfügbaren Raum optimal ausnutzt.

Um sicherzustellen, dass das Video im korrekten Verhältnis angezeigt wird und keine schwarzen Balken hat, kannst du den padding-bottom-Trick anwenden. Dies macht das Video responsiv und passt das Verhältnis an.

Hier wurde padding-bottom: 177.78% verwendet, was auf dem Seitenverhältnis 9:16 basiert. Das sorgt dafür, dass das Video proportional bleibt, unabhängig von der Bildschirmbreite und keine schwarzen Balken link und rechts vom Video zu sehen sind.

Wenn das Einbinden des TikTok-Videos mit den oben genannten Methode nicht funktioniert hat, könnte es an spezifischen CSS-Eigenschaften oder HTML-Strukturen auf deiner Seite liegen. Alternativ könnten wir einen neuen Container anlegen, welcher in diesem Fall nur für das Video bestimmt ist.

Wir legen zuerst den Container als ein Div-Element an. Dort drin wird dann der Iframe des Videos eingebunden:

Dann brauchen wir noch das korrekte CSS.

Warum hier das Einfügen von Code nicht korrekt funktioniert, weiß ich nicht, deshalb musste ich hier Screenshots verwenden.

Das ist alles keine Hexerei, aber wenn man es nicht weiß, dann bekommt man das auch nicht hin :-).