我想使用jQuery在自定义按钮单击中播放嵌套iframe中的youtube。
jQuery(document).ready(function($){
$(".playButton").click(function(){
$(".flex-active-slide .player")[0].src += "?autoplay=1";
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playButton">Play button</div>
<iframe>
<html>
<body>
<div class="embedVideo">
<div class="player">
<iframe src="//www.youtube.com/embed/sqpKq6k04vk?width%3D640%26amp%3Bheight%3D360%26amp%3Bautoplay%3D0%26amp%3Bvq%3Dlarge%26amp%3Brel%3D0%26amp%3Bcontrols%3D1%26amp%3Bautohide%3D2%26amp%3Bshowinfo%3D1%26amp%3Bmodestbranding%3D0%26amp%3Btheme%3Ddark%26amp%3Biv_load_policy%3D1%26amp%3Bwmode%3Dopaque">
<html>
<body>
<div id="player">
<div class="html5-videoPlayer">
<video ></video>
</div>
</div>
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
</iframe>最佳答案
您需要使用YouTube Player API
这是一个简单的解决方案
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<button id="play">Play</button>
<button id="stop">Stop</button>
<div id="video-placeholder"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
height: '390',
width: '640',
videoId: '6plKMU0tTTk', // insert your video id here - example: https://www.youtube.com/watch?v=6plKMU0tTTk
});
}
$( document ).ready(function() {
$('#play').on('click', function () {
player.playVideo();
});
$('#stop').on('click', function () {
player.pauseVideo();
});
});
</script>
</body>
</html>
关于jquery - 在自定义按钮中播放位于iframe中的youtube视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41342149/