Videobox (ohne javascript)

Ein User-Wunsch, auf die schnelle nachgereicht. Vielleicht auch für Euch interessant.
Einfügen lassen sich Youtube-Videos, Videos von "Liveleak.com" und von "myvideo.de"

Einfügen im Seiteninhalt:

<div class="videobox">
<div class="video">
<iframe width="457" height="265" name="inline" src="Video-URL 1" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0">
</iframe>
</div>

<div class="video_menu">
<ul>
<li> <a class="but tooltip" href="Video-URL1" target="inline">Video 1<span> Infotext </span></a> </i>
<li> <a class="but tooltip" href="Video-URL2" target="inline">Video 2<span>Infotext </span></a> </i>
<li> <a class="but tooltip" href="Video-URL3" target="inline">Video 3<span> Infotext </span></a> </i>
<li> <a class="but tooltip" href="Video-URL4" target="inline">Video 4<span> Infotext </span></a> </i>
<li> <a class="but tooltip" href="Video-URL5" target="inline">Video 5<span> Infotext </span></a> </i>
<li> <a class="but tooltip" href="Video-URL6" target="inline">Video 6<span> Infotext </span></a> </i>
</ul>
</div>
</div>

Die Video-URL bekommst du wie folgt:

• gehe auf die Seite youtube.de
• Suche gewünschtes Video
• unter dem Video auf "Teilen"
• nun auf "Einbetten"
• Dir wird ein <iframe src=http://youtube.com/embed/... Code angezeigt
• wir benötigen aus diesem <iframe src=" - Code nur die URL
• diese im Code einfügen

Füge der http://youtube.com/embed/XXXXXXX am Ende zu: ?autoplay=1&autohide=1
damit erreichst du "autoplay" und die "Steuer-Leiste" unten fährt nach dem Start ein.
Nur bei der ersten Video URL verzichten wir auf "autoplay".
Beachte bitte: Das funktioniert nur mit den youtube-videos.

---

Schritt 2: Der CSS-Code fürs Aussehen

.videobox {
  width: 500px;
  height: 371px;
  margin: 15px 0px 15px 0px;
  background: url(https://img.webme.com/pic/f/find-templates/video_bg.png);
  overflow: hidden; }

/* Feld mit Menü */
.video_menu {
  overflow: hidden;
  width: 470px;
  margin: 7px 0px 0px 16px; }

.video_menu ul {margin: 0px !important; }

/* Button Abstände */
.video_menu ul li {
  float:left;
  margin: 0px 11px 0px 5px;
  list-style-type:none !important;}

/* Feld für Videos */
.video {
  width: 457px !important;
  height: 265px;
  margin: 22px 0px 0px 20px;
  background-color: #FFF;
  overflow: hidden; }

/* User mit Design Clean benötigen diese Codezeile dazu */
#main iframe {width: 454px !important; }

/* Tooltip Fenster */
.tooltip span {
  width: auto; 
  position: absolute;
  color: #ddd;
  padding: 10px 10px 10px 15px;
  margin-top: 35px;
  background-color: #121212;
  border-radius: 15px 15px 15px 0px;
  box-shadow: 1px 1px 10px #777;
  visibility: hidden; }

.tooltip:hover span { visibility: visible; z-index:102;}

/* Aussehen der Links */
.but {
  width: 52px;
  height:12px !important;
  line-height: 12px;
  color:#777777;
  display: block;
  font-size: 12px;
  padding: 3px 5px;
  text-align: center;
  text-decoration: none; }

/* Button Hover */
.but:hover {
  color: #BBBBBB;
  text-decoration: none;}

Im CSS-Code müssten keine Änderungen vorgenommen werden.
Linkfarbe und Hover Linkfarbe in den beiden letzten Codezeilen.