Das Einstellen von YouTube-Videos auf Websites ist heutzutage \u00fcblich. YouTube stellt einen Iframe-Code bereit, um das Video auf Websites einzubetten. Das durch diesen Iframe-Code gerenderte Video reagiert jedoch nicht. Dies bedeutet, dass Ihr Video auf kleinen Ger\u00e4ten wie Mobiltelefonen oder Tablets m\u00f6glicherweise nicht gut aussieht.<\/p>\n
Tats\u00e4chlich m\u00fcssen Ihre eingebetteten YouTube-Videos f\u00fcr eine bessere Benutzererfahrung responsive sein. In diesem Artikel untersuchen wir, wie Sie responsive YouTube-Videos in Ihre Website einbetten.<\/p>\n
Ich habe 3 m\u00f6gliche Wege gefunden, um unser Endergebnis zu erreichen. Sehen wir es uns einzeln an.<\/p>\n
Bootstrap ist das beliebteste Front-End-Tool, mit dem Sie responsive Websites entwickeln k\u00f6nnen. Es bietet auch eine einfache L\u00f6sung, um Ihr YouTube-Video reaktionsschnell zu machen.<\/p>\n
Um loszulegen, m\u00fcssen Sie zun\u00e4chst die CSS-Datei von Bootstrap wie folgt einbinden. Wenn Sie Bootstrap bereits in Ihrem Projekt verwenden, \u00fcberspringen Sie diesen Schritt.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" \/><\/code><\/pre>\nVerwenden Sie als N\u00e4chstes den folgenden HTML-Code, um Ihr Video mit einem Bootstrap einzubetten.<\/p>\n
<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"embed-responsive embed-responsive-16by9\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<iframe src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID?rel=0\"><\/iframe>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\nErsetzen Sie den Platzhalter VIDEO_ID durch die tats\u00e4chliche Video-ID. Probieren Sie es aus und Sie sollten sehen, dass Ihr Video auf kleineren Ger\u00e4ten gut funktioniert.<\/p>\n
Informationen zu dieser Einbettungsmethode finden Sie in der Bootstrap-Dokumentation<\/a>.<\/p>\nResponsives YouTube-Video mit Fancybox<\/h3>\n
Diese Option ist etwas anders. Anstatt das Video direkt anzuzeigen, zeigen wir hier ein Thumbnail des YouTube-Videos an. Wenn Sie dann auf ein Miniaturbild klicken, wird Ihr Video im Popup-Fenster abgespielt. Dies kann mit einer Fancybox erfolgen<\/a>.<\/p>\nUm Fancybox verwenden zu k\u00f6nnen, m\u00fcssen Sie die folgenden CSS- und JS-Dateien in Ihre Website einbinden.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.5.1\/dist\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\"><\/script><\/code><\/pre>\nGeben Sie danach den unten stehenden Code ein und Sie sind fertig.<\/p>\n
<a data-fancybox=\"\" href=\"https:\/\/www.youtube.com\/watch?v=VIDEO_ID\">\n\u00a0\u00a0\u00a0\u00a0<img src=\"http:\/\/i3.ytimg.com\/vi\/VIDEO_ID\/hqdefault.jpg\" \/>\n<\/a><\/code><\/pre>\nLite YouTube-Einbettungen<\/h3>\n
In der ersten Methode haben wir Iframe-Code verwendet. Bei der Verwendung eines iframes muss der Browser fast 800 kB an Daten herunterladen, um ein Video zu rendern.<\/p>\n
Mit fancybox k\u00f6nnen Sie diese Last reduzieren. Aber auch hier m\u00fcssen Sie deren CSS und JS einbeziehen. Es wird empfohlen, diese Dateien \u00fcber CDN hinzuzuf\u00fcgen, um die Serverlast freizugeben.<\/p>\n
W\u00e4hrend der Arbeit an diesem Thema bin ich auf einen Artikel gesto\u00dfen, der das Einbetten von YouTube-Videos auf andere Weise erkl\u00e4rt. Es muss weder beim Laden der Seite einen Iframe verwenden noch irgendwelche Dateien einschlie\u00dfen.<\/p>\n
Der Artikel enth\u00e4lt Code, den jeder leicht zu seiner Anwendung hinzuf\u00fcgen kann. Bitte folge dem Artikel zu Lite YouTube Embeds<\/a> und f\u00fcge<\/a> den Code wie vorgeschlagen hinzu.<\/p>\nDies sind die 3 M\u00f6glichkeiten, ein responsives YouTube-Video einzubetten. Je nach Ihren Anforderungen k\u00f6nnen Sie eine der L\u00f6sungen ausw\u00e4hlen.<\/p>\n
Zum Thema passende Artikel<\/h4>\n