尝试用jQuery在点击时切换iframe YouTube视频的URL
Trying to switch URL of iframe YouTube video on click with jQuery
我有两个div。一个包含一个YouTube iframe视频,另一个包含YouTube缩略图。按下按钮时,以下是预期步骤:
-检索缩略图的URL
-将iframe视频的URL替换为缩略图所在的YouTube视频的URL。
这是JSFiddle。它似乎应该工作,但当我点击按钮时,我只得到一个黑屏。有人能提供建议吗?http://jsfiddle.net/jw1sw01v/1/
HTML
<div id="stage">
<iframe width="560" height="315" src="https://www.youtube.com/embed/e-ORhEE9VVg" frameborder="0" allowfullscreen></iframe>
</div>
<div class="slideYThumbnail">
<img class="slideYThumbnailInside" src="http://img.youtube.com/vi/kt0g4dWxEBo/0.jpg">
</img>
</div>
jQuery
$(document).on('click', '.slideYThumbnail', function(event) {
var change = $(this).find("img").attr("src").split("/");
alert(change[4]);
$("#stage > iframe").attr("src", "https://www.youtube.com/embed/' + change[4] + '");
});
您必须删除js 中的单引号
$(document).on('click', '.slideYThumbnail', function(event) {
var change = $(this).find("img").attr("src").split("/");
alert(change[4]);
$("#stage > iframe").attr("src", "https://www.youtube.com/embed/" + change[4] );
});
用于直接在图像上
$(document).on('click', '.slideYThumbnailInside', function (event) {
var change = $(this).attr("src").split("/");
$("#stage > iframe").attr("src", "https://www.youtube.com/embed/"change[4]);
});
添加此js而不是您的jsJS:
$(document).on('click', '.slideYThumbnail', function (event) {
var change = $(this).find("img").attr("src").split("/");
alert(change[4]);
$("#stage > iframe").attr("src", "https://www.youtube.com/embed/"change[4]);
});
工作链路
从新的视频源级联中删除单引号,如下所示:
$("#stage > iframe").attr("src", "https://www.youtube.com/embed/" + change[4]);
相关文章:
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 如何用低音量自动启动Youtube视频(iframe)
- 可以't从Youtube IFrame更改焦点
- Youtube iframe api未在YouTubeIframeAPIReady上触发
- 使用YouTube iFrame API的IE中的JavaScript问题
- 多个youtube iframe播放此内容
- 如何使用javascript(或jQuery)将youtube视频添加到iframe(基于web的RTE)
- Browserify breaks Youtube iFrame API
- Iframe youtube多个视频跟踪
- Iframe|youtube Iframe上的移动后退按钮
- React dangerouslySetInnerHTML 渲染 iframe youtube 嵌入自 props
- iframe youtube视频开始播放后背景变暗
- 尝试用jQuery在点击时切换iframe YouTube视频的URL
- 如何设置视频广告在iframe youtube播放器API在javascript
- 获得当前嵌入iframe youtube播放器的时间
- Iframe YouTube API动态改变视频源
- iframe youtube视频控制
- 改变iframe youtube src与IE8错误
- Iframe youtube api视频事件设置
- 嵌入iframe - Youtube视频不循环