CSS 我可以更改嵌入式 YouTube 视频的播放图标吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21181709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I change the play icon of embedded youtube videos?
提问by Patartics Milán
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.
我可以替换嵌入的 youtube 视频上的原始 youtube 播放图标吗？我会将自己的图标放在 youtube iframe 上方以实现这一目标。我知道 facebook 不允许设置喜欢按钮的样式，所以这就是我询问 youtube 播放器定制的原因。
回答by AfromanJ
I'm not sure you can customise a YouTube embedded without using the YouTube JavaScript api.
我不确定您是否可以在不使用 YouTube JavaScript api 的情况下自定义嵌入的 YouTube。
Heres how to do it with the api:
以下是如何使用 api 执行此操作：
Javascript
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
HTML
<div id="player"></div>
<button class="start-video">Start Video</button>
CSS
CSS
button {
position: absolute;
top: 106px;
padding: 12px;
left: 174px;
}
I've created a Jsfiddlewith a working example.
我用一个工作示例创建了一个Jsfiddle。
