Youtube - biểu tượng phát tùy chỉnh

Question

Tôi muốn hỏi, liệu tôi có thể thay đổi biểu tượng phát video trên Youtube không? Tôi tìm thấy bài đăng này: Can I change the play icon of embedded youtube videos? Nhưng nút này nằm trên biểu tượng phát ban đầu, vì vậy nếu tôi sử dụng biểu tượng phát trong suốt, biểu tượng phát ban đầu sẽ hiển thị.

Cảm ơn bạn đã trợ giúp.

Answer 1

Tôi không nghĩ rằng bạn có thể thay đổi nút thật, nhưng bạn có thể làm việc xung quanh nó:

1. Ẩn chơi
2. Lấy thumbnail giống như mô tả here và đặt nó trên trang của bạn trong cùng một vị trí và kích thước của trình phát
3. Đặt biểu tượng phát của riêng bạn lên hình thu nhỏ
4. Khi biểu tượng phát của bạn được nhấp, ẩn hình thu nhỏ và biểu tượng phát của bạn, hiển thị trình phát và sử dụng API YouTube như trong liên kết của bạn để bắt đầu video

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>