我可以更改嵌入式YouTube视频的播放图标吗？ [英] Can I change the play icon of embedded youtube videos?

问题描述

我允许替换嵌入的YouTube视频上的原始YouTube播放图标吗？我会在youtube iframe上面放置我自己的图标来实现。我知道Facebook不允许样式的按钮，所以这就是为什么我问YouTube播放器自定义。

Am I allowed to replace the original youtube play icon on embedded youtube videos? I would place my own icon above the youtube iframe to achieve that. I know that facebook does not allow to style the like button, so that's why I am asking about youtube player customization.

推荐答案

不知道如何使用api进行自定义：

Heres how to do it with the 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;
}

我创建了 Jsfiddle 。

I've created a Jsfiddle with a working example.

这篇关于我可以更改嵌入式YouTube视频的播放图标吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！