Hinweis: Der folgende Artikel hilft Ihnen weiter: Anleitung zum Einbetten YouTube Video auf responsiver Website – Showeblogin
Machen YouTube und Vimeo-Videos, die für Blogs oder Websites reagieren, sodass sie die Geräte der Besucher, Mobiltelefone, iPads, Laptops und Computer, anpassen können.
Einbetten YouTube Video: Wussten Sie? YouTube wurde im Februar 2005 gegründet und mittlerweile gibt es weltweit Milliarden von Menschen, die ursprünglich erstellte Videos hochladen, ansehen und teilen. In letzter Zeit ist die Entwicklung eines responsiven Blogs oder einer responsiven Website in Mode gekommen, damit Besucher die jeweilige Website und den jeweiligen Blog auf allen Geräten genießen können, von kleinen Mobiltelefonen bis hin zu großen Computern und Fernsehern.
Jedoch, YouTube Bietet nur Codes mit fester Größe zum Einbetten YouTube Videos. Die Standardgröße beträgt 560 Pixel in der Breite und 315 Pixel in der Höhe. Sie können die Größe ändern YouTube Videos mit Hilfe der Option „Benutzerdefinierte Größe“ unter der Dropdown-Option „Videogröße“ erstellen.
Die benutzerdefinierte Größe ist jedoch nicht die Lösung zum Einbetten YouTube Videos auf Ihrer responsiven Webseite. Die Größe ändert sich nicht entsprechend der Gerätebreite und -höhe Ihres Website-Besuchers.
Daher sollten Sie einige Tricks anwenden, die Ihnen helfen können YouTube Videos reagieren. Ich stelle einfache CSS- und HTML-Codes zum Einbetten zur Verfügung YouTube und Vimeo-Videos in Ihren responsiven Blogs und Websites.
Die SWT Video Box ist so konzipiert, dass Ihre YouTube Das Video wird nicht nur responsiv, sondern verfügt auch über ein benutzerdefiniertes Miniaturbild und eine Wiedergabeschaltfläche in der Mitte des Videos. Sie können die benutzerdefinierte Miniaturansicht für jedes neue Video ändern, das Sie in einen Blogbeitrag oder eine Webseite einbetten.
Erstellen oder einbetten YouTube Video-Responsive
Setp-1:
Fügen Sie diese CSS-Codes zunächst einmal in Ihre Blogs oder Websites ein ]]>:
.swt-video-box {/* SWT Video Box von Showeblogin */ width:100%; Cursor:Hand; Höhe: 315px; Cursor:Zeiger; Position:relativ; Überlauf versteckt; maximale Breite: 100 %; padding-top:25px; padding-bottom:25px; Hintergrundfarbe:#000;} .swt-video-box .swt-video-thumb{ top:0; links:0; rechts:0; unten:0; Deckkraft:.8; Rand:auto; Bildschirmsperre; maximale Breite: 100 %; Position:absolut; Breite: 100 % !wichtig; Höhe: 100 % !wichtig; filter:alpha(opacity=80);} .swt-video-box .swt-video-play{ top:50%; links:50 %; Deckkraft: .89; Breite: 125 Pixel; Höhe:125px; margin-top:-56px; margin-left:-69px; Position: absolut; filter:alpha(opacity=89); background:url(“http://img.microsoft.com/files/video-play-icon.png”) no-repeat /* SWT Video Box Tutorial unter http://www.microsoft.com/?p=439 */}
Schritt 2:
Fügen Sie nun diese Java-Skripte in Ihre Blogs oder Websites ein. Für Blogger gehen Sie einfach zu Layout und fügen Sie ein Gadget (HTML/JavaScxript) hinzu.
NOTIZ: Löschen Sie die letzte Zeile (vierte), wenn Sie jQuery bereits in Ihrer Vorlage hinzugefügt haben.
Schritt 3:
Abschließend müssen Sie diese Codes kopieren und in Ihr Blog oder Ihre Website einfügen, wo Sie sie einbetten möchten YouTube Video.
Schritt 4:
Genießen!
