it-swarm.com.de

So legen Sie eine Wiedergabetaste über ein YouTube-Miniaturbild

In einem Projekt, an dem ich arbeite, ziehen wir eine Reihe von YouTube-Videos, die unser Medienteam veröffentlicht hat, in eine Datenbank, damit wir sie als verwandten Inhalt präsentieren können.

Wir möchten in der Lage sein, eine Wiedergabetaste über die generierten YouTube-Miniaturansichten zu legen, damit klar ist, dass die Miniaturansicht ein Video darstellt, das wiedergegeben werden kann.

Ich bin auf der Suche nach dem besten Weg, um dies zu erreichen - ich habe ein bisschen gesucht und entweder ist niemand daran interessiert, es ist wirklich offensichtlich, wie es geht, oder ich habe nur Mühe, die richtigen Suchbegriffe zu finden.

Die Wege, die ich bisher gefunden habe, sind:

  1. Verwenden Sie ein Container-Div mit einem Hintergrundbild für die Wiedergabe und verringern Sie die Deckkraft der Miniaturansicht, um die Wiedergabeschaltfläche über der Miniaturansicht anzuzeigen. Ich bin kein großer Fan davon wegen der zusätzlichen div und es scheint nicht in IE zu funktionieren.
  2. Bearbeiten Sie die Miniaturansichten in Photoshop stapelweise und ändern Sie sie so, dass sie eine Wiedergabetaste haben. Das wäre etwas unglücklich, da wir jeden Abend Videos runterziehen - also gibt es manchmal Videos ohne Wiedergabetasten.
  3. Ändern Sie den Importvorgang, um mit der Wiedergabetaste dynamisch neue Miniaturbilder zu erstellen. Dies würde beide der oben genannten Probleme beheben, wäre jedoch schwieriger zu tun.

Ich hatte gehofft, einfach eine Klasse zum Bild hinzufügen und Javascript und/oder CSS verwenden zu können, um das Bild zu überlagern.

Wenn jemand einen Rat dazu hat, würde ich ihn wirklich schätzen.

Aktueller HTML-Code (gepostet von OP in Kommentaren):

<li>
    <a 
        class="youtube" 
        title="{ video id here }" 
        href="youtube.com/watch?v={video id here}">
             <img 
                 src="i3.ytimg.com/vi{ video id here }/default.jpg" 
                 alt="{ video title here }" />
    </a><br /> 
    <a 
        class="youtube" 
        title="{vide id here }" 
        href="youtube.com/watch?v={ video id here }">
             { video title here }
    </a>
</li> 
28
someoneinomaha
<div class="video">
    <img src="thumbnail..." />
    <a href="#">link to video</a>
</div>

cSS

.video { position: relative; }

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 20px;
   left: 20px;
}

Ich würde so etwas machen. Auf jeden Fall halte ich es nicht für eine gute Idee, die Bilder nachzubearbeiten, um die Wiedergabetaste hinzuzufügen. Was ist, wenn Sie beispielsweise das Schaltflächendesign ändern müssen?


Wenn Sie die Schaltfläche zentrieren möchten, können Sie sie oben und links auf 50% einstellen und dann negative Ränder hinzufügen, die der Hälfte der Größe der Schaltfläche entsprechen:

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 50%;
   left: 50%;
   margin: -20px 0 0 -20px;
}
37
Robin

Eine Möglichkeit, dies zu tun, bietet viel Flexibilität ohne zusätzliches HTML-Markup (im Gegensatz zu den meisten Lösungen, die vorgeschlagen werden, wenn nach Bildüberlagerungen gefragt wird), ist die Verwendung von :after CSS-Selektor. Angenommen, es gibt einen Div der "Video" -Klasse um jedes Bild herum, so etwas wie:

.video:after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 120px;
    z-index: 100;
    background: transparent url(play.png) no-repeat center;
    pointer-events: none;
}

Bearbeiten Sie die Werte für width, height und z-index nach Bedarf abhängig vom Rest Ihres Stylesheets. Dies funktioniert gut, ohne den Code zu beeinträchtigen, der möglicherweise vorhanden ist, z. B. ein Div, in dem eine Beschriftung gespeichert ist.

Fügen Sie einen Schwebeflug-Selektor für zusätzlichen Snazz hinzu:

.video:hover:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 150px; 
    height: 120px; 
    z-index: 100; 
    background: transparent url(play_highlight.png) no-repeat center; 
    pointer-events: none; 
}
18
otravers

Kurz, klar, schnell und ohne zusätzliches HTML:

<a class="youtube" href="http://youtube.com/watch?v={video id here}">
    <img src="http://i3.ytimg.com/vi/{video id here}/default.jpg" alt="{ video title here }" />
</a>

CSS:

.youtube {
    position: relative;
    display: inline-block;
}
.youtube:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent url({play icon url here}) center center no-repeat;
}

PS: Sie können die Größe der Wiedergabesymbole (abhängig von der Größe der Miniaturansicht) auch ansprechend gestalten, indem Sie background-size Zu den .youtube:before - Stilen hinzufügen.

Beispielsweise:

.youtube:before {
    background-size: 30%;
}
4
Dima L.

Sie können auch einen Dienst verwenden

http://halgatewood.com/youtube/

Wie folgt: http://halgatewood.com/youtube/i/youtube_id.jpg (Weiterleitung zu Amazon)

Zum Beispiel: http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg (Weiterleitung zu Amazon)

Bearbeiten:

der Service wurde eingestellt, vermutlich haben zu viele Leute ihn bombardiert :) Jetzt läuft es auf Github

https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/ (link broken) https://github.com/halgatewood/youtube -thumbnail-enhancer

Hier ist ein weiterer Dienst, der dasselbe tut (wie von muktesh patel vorgeschlagen):

http://www.giikers.com/iwc

4
Timo Huovinen