Tipps und Tricks zu SEO

Tipps und Tricks zu SEO

YouTubeYouTube-Videos lassen sich normalerweise nur mit festen Größenangaben einbetten. Das kann auf Webseiten mit Responsive Design zu einer unschönen Darstellung führen. Mit dem folgenden Trick klappt eine Einbindung für YouTube-Videos mit variabler Größe.

Einer der größten Verfechter von Responsive Design ist Google. Komisch also, dass sich ausgerechnet die Videos von Googles YouTube nicht per Responsive Design einbetten lassen, sondern nur mit festen Größenangaben. Die feste Größe kann dazu führen, dass das Design einer responsiven Webseite durcheinander gerät und nicht mehr schön aussieht - etwa dann, wenn das Video über den Rand hinausragt.

Mit einem einfachen Trick, den ich auf der Seite avexdesigns.com gefunden habe, lässt sich dieses Problem umgehen. Man braucht nur ein wenig CSS dazu, um einen speziellen Div-Container zu erstellen, der dann später das Video enthält. Der folgende CSS-Code muss dazu an passender Stelle ergänzt werden:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

An der Stelle, wo später das Video angezeigt werden soll, ist der folgende Beispielcode einzufügen:

 <div class="video-container">
         <iframe src="http://www.youtube.com/embed/xxxxxxxxx" frameborder="0"

width="560" height="315"></iframe>
</div>

 


Christian Kunz

Von Christian Kunz

SEO-Experte.
Sie benötigen Beratung für Ihre Webseite? Klicken Sie hier


Anzeige

SEO-Vergleich


 

 


 

 

 

 

Anzeige

rnkeffect

Premium-Partner (Anzeige)


Anzeigen

sedo

SEO Agentur aus Darmstadt

SEO-Vergleich

Online Solutions Group




Sprecher auf

Onsite-Optimierung

Onsite-Optimierung

 

SEO- und Suchmaschinenblogs

SEO-FAQ

Bild © FM2 - Fotolia.com

Bekannt aus

Website Boosting


Internet World Business

SEO United


The SEM Post


Webselling

SEO selber machen

SEO selber machen

Jetzt vernetzen

SEO-Glossar

SEO-Glossar

 

SEO-Beratung

Wir bringen gemeinsam Ihre Webseite in Google nach vorne. Profitieren Sie von jahrelanger SEO-Erfahrung.

Social Networks und RSS-Feed

Auszeichnungen

seo19 sieger sichtbarkeit 2020 200x200px