Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Youtube - custom play icon [closed]

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 play icon, so if i use something transparent, orginal play icon will be visible.

Thank you for help.

like image 561
user3573535 Avatar asked Sep 17 '15 10:09

user3573535


1 Answers

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 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>
like image 93
Tom Doodler Avatar answered Oct 10 '22 04:10

Tom Doodler