我可以更改嵌入式YouTube视频的播放图标吗? [英] Can I change the play icon of embedded youtube videos?
本文介绍了我可以更改嵌入式YouTube视频的播放图标吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我允许替换嵌入的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屋!
查看全文