我可以更改嵌入的 youtube 视频的播放图标吗？

Posted 2023-02-24

【中文标题】我可以更改嵌入的 youtube 视频的播放图标吗？

【英文标题】：Can I change the play icon of embedded youtube videos?

【发布时间】：2014-02-06 12:52:04

【问题描述】：

我可以替换嵌入的 youtube 视频上的原始 youtube 播放图标吗？我会在 youtube iframe 上方放置我自己的图标来实现这一点。我知道 facebook 不允许设置点赞按钮的样式，所以这就是我询问 youtube 播放器自定义的原因。

【参考方案1】：

我不确定您是否可以在不使用 YouTube javascript api 的情况下自定义嵌入的 YouTube。

以下是如何使用 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 和一个工作示例。

【讨论】：

这不起作用，您可以在小提琴中的自定义按钮下方看到 youtube 按钮。

不适合我@roNn23，在 Chrome 中，来自 AfromanJ 的链接小提琴看起来不错并且可以自定义。