Can I change the play icon of the embedded YouTube videos?

Question

Am I allowed to replace the original YouTube play icon with the embedded YouTube videos? I would put my own icon above the youtube iframe to achieve this. I know that facebook does not allow styling a button like this, so I'm asking about setting up youtube player.

Answer 1

I'm not sure if you can set up YouTube built-in without using the JavaScript JavaScript api.

Here's how to do it using api:

Javascript

//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 } }); } onPlayerStateChange = function (event) { if (event.data == YT.PlayerState.ENDED) { $('.start-video').fadeIn('normal'); } } $(document).on('click', '.start-video', function () { $(this).fadeOut('normal'); player.playVideo(); }); 

HTML

 <div id="player"></div> <button class="start-video">Start Video</button> 

CSS

 button { position: absolute; top: 106px; padding: 12px; left: 174px; } 

I created a Jsfiddle with a working example.