Video Resposive via Iframe und CSS eingebettet. Kleines CSS Anpassungsproblem.

Hallo miteinander,

ich habe heute mein Homepage (http://www.freiheitenwelt.de) soweit angepasst, dass nun auch meine eingebetteten YouTube Videos responsive funktionieren. ;-) Das funktioniert schon ziemlich gut.

Dafür habe ich den Iframe in einen Div-Container gepackt und danach via CSS angepasst.

<div class="article-video">

.article-video {	position:relative;
	padding-bottom: 56.25%;
	padding-top: 0;
	height:0;
	overflow:hidden;
}




.article-video iframe, .video-container object, .article-video embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Gut - soweit so gut! Leider hat es mir hierbei irgendwie die Überschriften und den Abstand zu den Texten versemmelt. (War vorher OK) Ich bin nun schon zwei Stunden auf der Suche aber ich finde einfach nicht, wie ich die Hoverüberschrift weiter nach unten bekomme, und den Text weiter nach unten ziehe. Sollte so aussehen wie bei den normalen Posts mit Vorschaubildern... Ich schicke mal zwei Bilder mit zur Verdeutlichung. Ist sicherlich nur ein kleines Problem... (http://www.freiheitenwelt.de/blog)

Wäre super Klasse, wenn mir hier jemand weiter helfen könnte.

Schönen Gruß aus Kolumbien

Moin - so das erste Problem hab ich hinbekommen mit einem einfachen.

margin-bottom: 25px;

Nun ist es aber leider so, dass die Videos oben und unten einen häßlichen schwarzen Rahmen aufweisen... Hab mit den Werten gespielt aber irgendwie scheint das nicht zu funktionieren.

Wo ist denn nu der Wurm drin..?

LG Martin