[FIXED] So überlagern Sie eine Wiedergabetaste über ein YouTube -Miniaturbildbild

Ausgabe

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 verwandte Inhalte präsentieren können.

Etwas, das wir gerne tun könnten, ist eine Wiedergabeschaltfläche über den generierten YouTube-Thumbnails einzublenden, damit es deutlicher wird, dass das Thumbnail ein Video darstellt, das abgespielt werden kann.

Ich suche nach dem besten Weg, dies zu erreichen – ich habe einige Recherchen durchgeführt und entweder interessiert sich niemand dafür, es ist wirklich offensichtlich, wie es geht, oder ich habe nur Probleme, die richtigen Suchbegriffe zu finden.

Die Möglichkeiten, die ich bisher gefunden habe, sind:

1. Verwenden Sie ein Container-Div mit einem Wiedergabe-Hintergrundbild und verringern Sie die Deckkraft der Miniaturansicht, um die Wiedergabeschaltfläche über der Miniaturansicht anzuzeigen. Ich bin kein großer Fan davon wegen des zusätzlichen Div und es scheint nicht im IE zu funktionieren.
2. Batch-Verarbeitung der Thumbnails in Photoshop – Ändern Sie sie so, dass sie eine Wiedergabeschaltfläche haben. Das wäre etwas unglücklich, weil wir jede Nacht Videos herunterziehen – also gab es irgendwann einige Videos ohne Play-Buttons.
3. Ändern Sie den Importvorgang, um neue Miniaturansichten mit der Wiedergabeschaltfläche dynamisch zu generieren. Dies würde beide oben genannten Probleme beheben, wäre jedoch schwieriger zu bewerkstelligen.

Ich hatte gehofft, dem Bild einfach eine Klasse 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 mich sehr darüber freuen.

Aktuelles HTML (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> 

Lösung

<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 sowas machen. Auf jeden Fall halte ich es nicht für eine gute Idee, die Bilder nachzubearbeiten, um die Wiedergabeschaltfläche hinzuzufügen. Was ist, wenn Sie zum Beispiel das Button-Design ändern müssen?

Wenn Sie die Schaltfläche zentrieren möchten, können Sie dies am besten tun, indem Sie oben und links auf 50 % setzen 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;
}

Beantwortet von – Robin

Antwort geprüft von – Terry (FixError Volunteer)