iframe youtube视频开始播放后背景变暗
Dim background after iframe youtube video starts playing
你好:)我想在youtube视频开始播放后立即调暗我(wordpress)网站的背景。
视频是这样嵌入的:
<iframe frameborder="0" width="660" height="371" allowfullscreen="" src="https://www.youtube.com/embed/CMm6tDavSXg?feature=oembed">
为了调暗背景,我会使用这样的东西:
<div class="div_popup_overlay"></div>
.div_popup_overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #333;
opacity: .7;
z-index: 3000;
}
然后用jQuery 触发
$( "#YOUTUBEVIDEO" ).click(function() {
$(".div_popup_overlay").fadeIn();
});
//更多类似于onvideoplay$(".div_popup_overlay").fadeIn();
所以现在我不知道如何以正确的方式使用youtube api,而不将视频嵌入api
试试这个:
首先,给iframe一个ID,这样API就可以找到它。接下来,确保在src属性中添加参数enablejsapi并将其设置为1(这样API就可以挂接到现有的DOM对象的事件中)。然后,设置与playerState事件的绑定,以便在播放视频时触发淡入
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('myplayer', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
$(".div_popup_overlay").fadeIn();
}
else if (event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED) {
$(".div_popup_overlay").fadeOut();
}
}
</script>
相关文章:
- 用于播放背景音乐的嵌入式flash播放器在IE浏览器中不起作用
- Flowplayer视频一直在隐藏的背景中播放
- 苹果/野生动物园在移动设备上播放背景视频时出现问题
- 视频作为命令播放的网站上的背景
- 如何防止嵌入式YouTube视频在WebView,Android的背景上播放
- 自动播放HTML时降低背景音乐音量
- jquery切换播放/停止图标背景
- 在点击和加载事件时播放暂停背景音频
- 处理不使用tubular.js播放的背景YouTube视频
- 在背景上播放音乐/声音的方法
- 整页.js - 在背景视频循环播放时向右移动幻灯片
- 在 html 页面背景中播放视频
- 如何重新绘制背景,使其看起来像我的“播放器”在html5-canvas中移动
- 为什么iPhone不允许在html元素的背景中自动播放视频
- 带有背景高清视频和动态播放的HTML页面
- 在JQuery/Javascript中使用暂停/播放图标实现背景音乐
- 了解HTML5视频何时可以在没有黑色背景的情况下播放的事件
- iframe youtube视频开始播放后背景变暗
- 在元素'上随机播放youtube视频;的背景
- SoundCloud:如何停止背景播放