我可以替换嵌入式YouTube视频上的原始YouTube播放图标吗?我会将自己的图标放在youtube iframe上方来实现这一点。我知道Facebook不允许设置喜欢按钮的样式,所以这就是为什么我要询问youtube播放器定制。
我不确定是否可以在不使用YouTube JavaScript api的情况下自定义嵌入的YouTube。
以下是使用 API 进行操作的方法:
爪哇语
//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。