यूट्यूब - कस्टम प्ले आइकन

Question

मैं पूछना चाहता था, अगर मैं यूट्यूब कंबल वीडियो प्ले आइकन बदल सकता हूं? मुझे यह पोस्ट मिला: Can I change the play icon of embedded youtube videos? लेकिन यह बटन मूल प्ले आइकन के शीर्ष पर है, इसलिए यदि मैं कुछ पारदर्शी, मूल प्ले आइकन का उपयोग करता हूं तो दिखाई देगा।

सहायता के लिए धन्यवाद।

Answer 1

मुझे नहीं लगता कि आप वास्तविक बटन को बदल सकते हैं, लेकिन आप इसे चारों ओर काम कर सकता था:

1. खिलाड़ी छुपाएं
2. वर्णित here तरह थंबनेल जाओ और एक ही में अपने पृष्ठ पर डाल दिया खिलाड़ी
3. की स्थिति और आकार थंबनेल
4. जब आपके चलाएं आइकन क्लिक किया जाता है, थंबनेल और अपनी खेलने आइकन को छिपाने के ऊपर अपनी खुद की चलाएं आइकन रखो, खिलाड़ी दिखाने के लिए और अपने लिंक में की तरह यूट्यूब एपीआई का उपयोग शुरू करने के लिए वीडियो

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>