Responsive iframe- und video-Elemente

Beim Einbetten von Videos innerhalb von iframe– oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Größenveränderung ihres Containerelements. Obwohl die Breite des iframe’s mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen Höhe betroffen.

Um dieses Problem zu beheben, gibt es einen einfachen Trick: Um das betreffende iframe oder video wird ein Wrapper-Element eingefügt.

<div class="video-wrapper">
	<iframe width="560" height="315" src="http://www.youtube.com/embed/T0ezIRTeIUY" frameborder="0" allowfullscreen></iframe>
</div>

Das allein reicht natürlich noch nicht aus. Um das gewünschte Verhalten zu erreichen, wird noch ein wenig Css benötigt.

.video-wrapper {
	position: relative;
	/* padding-top je nach Video-Format */
	padding-top: 56.25%; /* entspricht 16:9 */
}

	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

Erklärung

Es wird eine Box erstellt, die je nach padding-top ein bestimmtes Format besitzt. In dieser Box wird das iframe– oder video-Element positioniert. Durch die width– und height-Eigenschaften füllt es das Elternelement aus und passt sich dessen Größenveränderungen an.

Links

Creating Intrinsic Ratios for Video
FitVid.js

SVN: Dateien und Ordner ignorieren

Um zu verhindern, dass bestimmte Dateien oder Ordner in das Projektarchiv übermittelt werden, können sie mittels eines einfachen Befehls ignoriert werden:

$ svn propset svn:ignore "style.css" .

Dieses Vorgehen ist projektabhängig, d.h. dass in jedem Projekt in dem die Datei style.css ignoriert werden soll die ignore-Eigenschaft erneut gesetzt werden muss. Dafür gilt diese ignore-Regel allerdings für jeden Nutzer, der das Projektarchiv auscheckt.

Gut zu wissen

Der schließende . ist wichtig, da er SVN sagt dass wir uns im Zielordner befinden.

Links

How to remove a file/folder from a SVN repository and add to the ignore list
How to … Make Subversion ignore files and folders

Suchen und Ersetzen mit regulären Ausdrücken in Geany

Beim Editieren eines Html-Dokuments stieß ich kürzlich auf eine kleine Unannehmlichkeit: Innerhalb eines <a href="#" class="chief">[TEXT]</a>-Elements sollten vor dem schließenden Tag noch zusätzliche Inhalte eingefügt werden. Prinzipiell nicht weiter wild, aber dieses Konstrukt kam über 30 Mal im Dokument vor und der Anker-Text änderte sich pro Element. Mit einem einfachen Suchen und Ersetzen kam ich also nicht weit, da die Anker-Elemente durch den wechselnden Text einzigartig waren. Und alle Elemente manuell ersetzen kam nicht in Frage. Was also tun? Die Antwort hieß reguläre Ausdrücke. Die IDE meiner Wahl, Geany, erlaubt im Suchen-und-Ersetzen-Dialog die Verwendung der Option „reguläre Ausdrücke“, daher probierte ich ein wenig herum, fragte Kollegen und kam schließlich durch die Hilfe von David auf folgendes:

Suchmuster

(<a href="#" class="chief">)([^<]+)(</a>)

Ersetzungsmuster

\1\2 <i class="icon link" aria-hidden="true"></i>\3

Vereinfacht gesagt sucht Geany also nach allen a-Elementen mit der Klasse chief und setzt vor dem schließenden Tag <i class="icon link" aria-hidden="true"></i> ein.

Funktionierte tadellos und wird sicherlich noch öfter genutzt werden.

Mit grep einen Suchstring in Dateien eines Verzeichnisses finden

paul@athene:/var/www/paulchrablass$ grep -ril --include="*.php" "class=\"special\"" ./

Durchsucht das aktuelle Verzeichnis /var/www/paulchrablass nach allen .php-Dateien, in denen der String class="special"> vorkommt und spuckt den entsprechenden Dateinamen samt dazugehörigen Pfad aus.

Parameter

-r = rekursive Suche, d.h. geht auch in Unterordner
-i = ignoriert Groß- und Kleinschreibung
-l = gibt nur den Dateinamen aus
--include = nur Dateien die die Merkmale innerhalb des include-Strings aufweisen

Gut zu wissen

Die Anführungszeichen werden mit Backslashes escaped.

Links

grep im Ubuntuusers-Wiki
grep manpage