Question

70

Youtube - custom play icon

rated 0 times [ 73] [ 3] / answers: 1 / hits: 42168 / 9 Years ago, thu, september 17, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jesse

Add To Favorites

Follow

Total Points: 513

Total Questions: 118

Total Answers: 106

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

answered 9 Years ago catrinas · Accepted Answer

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

Hide the player

Get the thumbnail like described here and put it on your page in the same position and size of the player

Put your own play icon over the thumbnail

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>