Youtube - Quickliste Icon

[claxan]

Hallo Zusammen,

Wenn man bei Youtube die die Vorschauen von den Videos anschaut gibt es
im Bild links unten ein Icon + wo man das Video zu der Quickliste hinzufügen
kann.

Weiss jemand wie man das machen kann. Kann mir dabei jemand weiterhelfen.

Vielen dank

Claxan

 

[vini-boy]

Hallo Zusammen,

Wenn man bei Youtube die die Vorschauen von den Videos anschaut gibt es
im Bild links unten ein Icon + wo man das Video zu der Quickliste hinzufügen
kann.

Weiss jemand wie man das machen kann. Kann mir dabei jemand weiterhelfen.

Vielen dank

Claxan

Hallo Claxan ,

willst du das in deine Webseite einfügen die Sachen stehen an der Seite !!!
sonst hat es nicht´s mit html zutun !!!!

mfg

vini-boy

 

[ohrflieger]

Ich nehme an, du möchtest in deiner Webseite etwas einbauen, das so ähnlich aussieht wie dieses Quicklist-Icon.

Bei Youtube ist das etwas umständlicher gelöst, aber hier meine Quick-and-Dirty-Version:

Der Quelltext in deiner Website:

<div class="vorschau">
	<a href="link-zum-video.html">
		<img src="bild.jpg" alt="" />
	</a>
	<a class="quickbutton" href="link-zur-quicklist.html">+</a>
</div>

Dazugehöriges CSS:

.vorschau {
 position: relative;
}

a.quickbutton {
 position: absolute;
 bottom: 5px;
 left: 5px;
 padding:3px;
 font: bold 16px Arial, Helvetica;
 background-color: #000;
 color: #ccc;
 text-decoration:none;
}

a.quickbutton:hover {
 color: #fff;
}

Kurze Erklärung:
Worauf es ankommt, ist das position: absolute; für den quickbutton. Da der Container mit class="vorschau" ebenfalls positioniert ist, wird der Quickbutton innerhalb dieses Containers ausgerichtet (in diesem Fall unten links). Die anderen Angaben sind nur für bessere Optik ;)
Also kämst du auch mit folgendem aus:

.vorschau {
 position: relative;
}

a.quickbutton {
 position: absolute;
 bottom: 5px;
 left: 5px;
}

 

[claxan]

@ohrflieger

Genau sowas habe ich gesucht habe es schon in meine Site implementiert.

Vielen Dank

Claxan