gpt4 book ai didi

css - 我可以更改嵌入式 youtube 视频的播放图标吗?

转载 作者:技术小花猫 更新时间:2023-10-29 10:55:57 25 4
gpt4 key购买 nike

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

最佳答案

我不确定您是否可以在不使用 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 一个工作示例。

关于css - 我可以更改嵌入式 youtube 视频的播放图标吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21181709/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com