YouTube - niestandardowa ikona odtwarzania

Question

Chciałem zapytać, czy mogę zmienić ikonę wideo z odtwarzaniem na Youtube? Znalazłem ten wpis: Can I change the play icon of embedded youtube videos? Ale ten przycisk jest nad oryginalną ikoną odtwarzania, więc jeśli użyję czegoś przezroczystego, widoczna będzie oryginalna ikona odtwarzania.

Dziękuję za pomoc.

Answer 1

Nie sądzę, można zmienić prawdziwy przycisk, ale można obejść:

1. Ukryj odtwarzacz
2. Get miniaturę jak opisano here i umieścić ją na swojej stronie w tym samym pozycja i rozmiar odtwarzacza
3. Umieść swoją własną ikonę odtwarzania na miniaturze
4. Gdy klikniesz ikonę odtwarzania, ukryj miniaturę i ikonę odtwarzania, pokaż odtwarzacz i użyj interfejsu API YouTube, tak jak w linku, aby rozpocząć wideo

Fiddle

//youtube script 
 
var tag = document.createElement('script'); 
 
tag.src = "//www.youtube.com/iframe_api"; 
 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 

 
var player; 
 

 
onYouTubeIframeAPIReady = function() { 
 
    player = new YT.Player('player', { 
 
     height: '244', 
 
     width: '434', 
 
     videoId: 'AkyQgpqRyBY', // youtube video id 
 
     playerVars: { 
 
      'autoplay': 0, 
 
      'rel': 0, 
 
      'showinfo': 0 
 
     }, 
 
     events: { 
 
      'onStateChange': onPlayerStateChange 
 
     } 
 
    }); 
 
} 
 

 
var p = document.getElementById ("player"); 
 
$(p).hide(); 
 

 
var t = document.getElementById ("thumbnail"); 
 
t.src = "http://img.youtube.com/vi/AkyQgpqRyBY/0.jpg"; 
 

 
onPlayerStateChange = function (event) { 
 
    if (event.data == YT.PlayerState.ENDED) { 
 
     $('.start-video').fadeIn('normal'); 
 
    } 
 
} 
 

 
$(document).on('click', '.start-video', function() { 
 
    $(this).hide(); 
 
    $("#player").show(); 
 
    $("#thumbnail_container").hide(); 
 
    player.playVideo(); 
 
});

.start-video { 
 
    position: absolute; 
 
    top: 80px; 
 
    padding: 12px; 
 
    left: 174px; 
 
    opacity: .3; 
 
    
 
    cursor: pointer; 
 
    
 
    transition: all 0.3s; 
 
} 
 

 
.start-video:hover 
 
{ 
 
    opacity: 1; 
 
    -webkit-filter: brightness (1); 
 
} 
 

 
div.thumbnail_container 
 
{ 
 
    width: 434px; 
 
    height: 244px; 
 
    overflow: hidden; 
 
    background-color: #000; 
 
} 
 

 
img.thumbnail 
 
{ 
 
    margin-top: -50px; 
 
    opacity: 0.5; 
 
}

<div id="player"></div> 
 
<div id="thumbnail_container" class="thumbnail_container"> 
 
    <img class="thumbnail" id="thumbnail" /> 
 
</div> 
 
<a class="start-video"><img width="64" src="http://image.flaticon.com/icons/png/512/0/375.png" style="filter: invert(100%); -webkit-filter: invert(100%);"></a>