Responsive embed Youtube Video

Da sich Youtube-Videos am einfachsten per iframe einbetten lassen, ist die responsive gestaltete Website schnell gar nicht mehr so richtig responsive. Dieses Problem läßt sich durch einen CSS-gestylten Container beseitigen. Dazu wrappt man das iframe-Element mit einem div-Container folgendermaßen:

<div class="video-container-name">.....</div>

und stylt den Container mit folgenden CSS-Anweisungen:


.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%;
}

Das Ergebnis könnt Ihr hier ausprobieren (einfach das Browserfenster verkleinern):

Neue Homepage ab 300 Euro

praxis-birgelIn dieser Woche habe ich die komplett neugestaltete Homepage der Physiotherapie-Praxis Birgel fertiggestellt. Die Website ist mit Hilfe von WordPress realisiert und kann auf allen Viewports (Smartphones, Tablets und PCs) problemlos betrachtet werden.

Für die Realisierung des responsive Design wurde das Bone-Template auf die Bedürfnisse der Physiotherapie-Praxis angepasst.

Eine Homepage ähnlich dieser kann ich ab 300 Euro auch für Sie erstellen. Über Ihre Kontaktaufnahme freue ich mich jederzeit.

Buchempfehlung: Schrödinger lernt HTML5

Nach den ersten 100 Seiten möchte ich behaupten, dass es sich um ein sehr gut geschriebenes Buch mit fundierten Informationen zum Thema HTML handelt.

Zuerst war ich etwas skeptisch wegen des lockeren Schreibstils, der in Dialogform HTML5, CSS und Javascript bespricht. Die Bedenken wurden jedoch durch die wirklich witzigen Texte ausgeräumt. Diese fördern die Aufmerksamkeit und regen zum weiterlesen an.

Besonders das sonst so staubig behandelte Thema "Die Geschichte des World Wide Web" ist anschaulich und spannend geschrieben und hat mich zur Empfehlung an dieser Stelle bewegt.

Der deutschsprachige Autor Kai Günster erzeugt mit der Dialogform "realitätsnahe" Problem-Situationen, die er dann sinnvoll auflöst. Die herausragende Leistung besteht dabei darin, dass trotz Edutainment-Ansatz die Dialoge nicht willkürlich oder aufgesetzt wirken.

Kurz gesagt: Das Buch macht einfach Spaß.

Eine minimale HTML5 Datei

<!DOCTYPE HTML>
		<html lang="de">
			<head>
				<meta charset="utf-8">
				<title>title</title>
				<base href="url">
				<link rel="stylesheet" href="style.css">
				<script src="script.js"></script>
			</head>
			
			<body>
				<!-- Seiteninhalt -->
			</body>
		</html>

Dank HTML5 ist eine minimale HTML-Datei sehr einfach geworden. Unkompliziert und mit wenigen Zeilen, die man ohne Probleme auswendig lernen kann. Die Zeilen im Detail …

Weiterlesen …Eine minimale HTML5 Datei