Youtube - 自定义播放图标 [英] Youtube - custom play icon

问题描述

我想问，如果我可以更换Youtube嵌入式视频播放图标吗？
我发现这篇文章：
我可以更改嵌入的YouTube视频的播放图标吗？
但是，此按钮位于原始播放图标的顶部，因此如果我使用透明的原始播放图标，则可以看到它。

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.

感谢您的帮助。

推荐答案

我不认为您可以改变真实按钮，但您可以解决它：
$ b

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

1. 隐藏播放器


2. 获取所描述的缩略图此处并将其放入在您的页面上播放与播放器相同的位置和大小


3. 将您自己的播放图标放在缩略图上


4. 点击播放图标后，隐藏缩略图和播放图标，显示播放器并使用YouTube链接中的YouTube API来开始播放视频

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

小提琴

//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>

这篇关于Youtube - 自定义播放图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！