Youtube - Custom Play Icon

I wanted to ask, if can i change Youtube embbeded video play icon ? I found this post: Can I change the play icon of embedded youtube videos? But this button is on top of orginal p

Solution 1:

I don't think you can change the real button, but you could work around it:

1. Hide the player
2. Get the thumbnail like described here and put it on your page in the same position and size of the player
3. Put your own play icon over the thumbnail
4. When your play icon gets clicked, hide the thumbnail and your play icon, show the player and use the YouTube API like in your link to start the video

Fiddle

//youtube scriptvar 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 = newYT.Player('player', {
        height: '244',
        width: '434',
        videoId: 'AkyQgpqRyBY',  // youtube video idplayerVars: {
            '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;
}

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