Youtube - user play icon

Question

I wanted to ask if I can change the Youtube icon for a video game? I found this post: Can I change the play icon of the embedded YouTube videos? But this button is on top of the icon of the original game, so if I use something transparent, the icon of the original game will be displayed.

Thank you for your help.

Answer 1

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

• Hide player
• Get the thumbnail as described here and place it on your page in the same position and size of the player.
• Put your own play icon above the thumbnail
• When you click on the play icon, hide the thumbnail and play icon, show the player and use the YouTube API, as in your link, to start the 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>