Javascript/jQuery video Pop-up
Javascript/jQuery video Pop-up
我用Javascript和jQuery制作了一个视频弹出窗口,它工作得很好,设计需要一点工作,但它很好,因为它只是一个临时工作......
我遇到的唯一问题是,当我单击关闭按钮时,视频应该停止,但它一直在后台播放。这是代码。
.HTML:
<body>
<div id="play">
<button>Play Video</button>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
<div id="vid">
<iframe width="640" height="360" src="https://www.youtube.com/embed/VNtYWDpdQ1w?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl" frameborder="0" allowfullscreen id="video"></iframe>
<a href="#"><h1 id="close">X</h1></a>
</div>
</body>
.CSS:
#video{
position: absolute;
top: 200px;
bottom: 400px;
left: 400px;
right: 400px;
display: none;
}
#close{
font-family: arial;
color: black;
position: absolute;
top: 100px;
left: 250px;
display: none
}
Javascript/jQuery:
$(document).ready(function(){
$('#play').click(function(){
$('#video').css('display', 'block');
$('#video').css('position', 'fixed');
$('#close').css('position', 'fixed');
$('#close').css('display', 'block');
$('#play').css('opacity', '0.5');
});
});
$(document).ready(function(){
$('#close').click(function(){
$('#play').data('clicked', 'no');
$('#video').css('display', 'none');
$('#close').css('display', 'none');
$('#play').css('opacity', '1');
});
});
在一段时间之前我也面临同样的问题。解决方案很简单,需要在id=vid中附加iframe并在关闭时将其清空。
<div id="vid">
<span id="frame"></span>
<a href="#"><h1 id="close">X</h1></a>
</div>
$(document).ready(function(){
$('#play').click(function(){
$('#frame').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/VNtYWDpdQ1w?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl" frameborder="0" allowfullscreen id="video"></iframe>');
$('#video').css('display', 'block');
$('#video').css('position', 'fixed');
$('#close').css('position', 'fixed');
$('#close').css('display', 'block');
$('#play').css('opacity', '0.5');
});
});
$(document).ready(function(){
$('#close').click(function(){
$('#frame').html('');
$('#play').data('clicked', 'no');
$('#video').css('display', 'none');
$('#close').css('display', 'none');
$('#play').css('opacity', '1');
});
});
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- KeyPress和Keydown在这个特定的代码上不起作用.只有key-up起作用
- 使用video.js在视频中进行章节导航
- Video.js+移动设备上的谷歌IMA:'点击'导致错误的事件
- Video.js:无法查看全屏视频
- Fancybox iFrame not showing up
- setAttribute和video.src用于更改IE9中不起作用的视频标记源
- Video.js没有'暂停后无法继续
- 在key up函数上将文本框值传递给javascript
- 使用video-js构建一个包含字符串的HTML视频
- 我该如何为video.js制作一个插件,在HTML标题中添加和删除三角形
- .pop() 可以用于 JavaScript 中的对象数组吗?
- 如何阻止Javascript Pop Up移动到页面顶部
- Javascript/jQuery video Pop-up
- Pop up with javascript
- 我应该使用Javascript SDK FB处理代码吗?login POP-UP还是自动处理以获得access_toke
- javascript pop up boxes
- 解决POP UP窗口大小调整问题
- jQuery Mobile Pop Up Widget 未隐藏在页面 init 上
- Login Pop Up按钮会自动弹出,不会直接跳转到登录表单