我知道有类似的问题，但我还没有完全开始工作。
此代码显示iframe内的YouTube视频。单击按钮（emsbinstartbutton）时，视频将被隐藏并替换为占位符。如果此占位符（threebytwo）已关闭，则视频应再次显示。
目前此功能正常，但视频隐藏时会继续播放（您可以听到音频，当您返回时可以看到它仍在播放）。隐藏时应停止视频。
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Widget.Master" Inherits="System.Web.Mvc.ViewPage<WidgetView>" %>
<%@ Import Namespace="WidgetData" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
<%= Html.WidgetTitle(Model) %>
</asp:Content>
<asp:Content ID="WidgetStyle" ContentPlaceHolderID="StyleContent" runat="server">
<%= Html.WidgetStyle(Model) %>
<%= Html.WidgetScripts(Model) %>
<script type="text/javascript">
// when they click on the buy now button we will hide the title and show the widget
//detach work to stop vid but can t get it back.....
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$("#divbuyonlineVid").hide();
$(".divbuyonlineVid").hide();
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
$("#divbuyonlineVid").show();
$(".divbuyonlineVid").show();
$("#threebytwo").hide();
});
});
</script>
<!-- playing with additional CSS needed to get the page behaving the way I want Will move this into the widget style once proven -->
<style type="text/css">
#threebytwo
{
display: none;
}
#emsbin2startbutton
{
cursor: pointer;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="divbuyonlineVid">
<!-- IMPORTANT the youtube video has to include &wmode=opaque at the end of the link so that the buynow button is above the video -->
<img class="emsbinstarttext" id="emsbinstarttext" src="http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png" />
<img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png" />
alt="" />
<div class="divVidContainer">
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="threebytwo" class="threebytwo">
<img class="closebtn" id="closebtn" src="http://static.e-talemedia.net/content/images/DoveYoutubeExit.png" />
<div class="threebytwomiddle">
<ul>
<% if (Model.ProductNotFound)
{ %>
<!-- List the retailers as we have none in stock -->
<%= Html.WidgetProductNotFoundList(Model) %>
<% }
else
{ %>
<%= Html.WidgetProductFoundList(Model) %>
<% } %>
</ul>
</div>
</div>
<%= Html.WidgetImpressionCode2(Model) %>
<%= Html.WidgetTrackingCode(Model) %>
</asp:Content>
我尝试了以下内容：
// when they click on the buy now button we will hide the title and show the widget
//detach work to stop vid but can t get it back.....
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$holdera = $("#divbuyonlineVid").detach();
$holderb = $(".divbuyonlineVid").detach();
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
$("#threebytwo").hide();
alert($holdera);
$("#divbuyonlineVid").append($holdera);
alert($holderb);
$(".divbuyonlineVid").append($holderb);
});
});
即使视频在点击时停止，当我尝试返回（追加）时，我会弹出一个对象错误。
所以在iframe中添加&enablejsapi=1：
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
并在jQuery中：
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$holdera = $("#divbuyonlineVid").hide();
$holderb = $(".divbuyonlineVid").hide();
$("#player").stop();
$("#threebytwo").show();
});
});
哪个不会改变任何东西。还有：
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$("#divbuyonlineVid").hide();
$(".divbuyonlineVid").hide();
$("#player").stopvideo();
$("#threebytwo").show();
});
});
在按钮上单击，您仍然可以听到音频，但不会显示三声。
我还添加了这个<script>：
<script type="text/javascript" src="http://www.youtube.com/player_api" ></script>
有人能指出我正确的方向或看到我出错的地方吗？
编辑：shabeer90描述了如何停止让我上路的youtube视频，但如果您只想暂停并将其保留在后台，则以下代码可能会有用：
jQuery的：
<script type="text/javascript">
$(document).ready(function () {
var obj = $('object')
.wrap('<div id="test"></div>')
.find('embed').attr('src', function (i, s) { return s + '&enablejsapi=1&version=3' }).end()
.find('param[name=movie]').attr('value', function (i, v) { return v + '&enablejsapi=1&version=3' }).end()
.detach()
.appendTo($('#test'));
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
//Then assign the src to null, this then stops the video been playing
obj.find('embed')[0].pauseVideo();
$("body").append($("<div>").css({
position: "fixed"
, width: "640px"
, height: "425px"
, "background-color": "#000"
, opacity: 0.6
, "z-index": 999
, top: 0
, left: 0
}).attr("id", "page-cover"));
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
// $("#divbuyonlineVid").show();
// $(".divbuyonlineVid").show();
$("#threebytwo").hide();
$("#page-cover").detach();
});
});
});
</script>
HTML：
<div class="divbuyonlineVid">
<img class="emsbinstarttext" id="emsbinstarttext" src="http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png" />
<img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png"
alt="" />
<div class="divVidContainer">
<object width="640" height="385">
<%--IMPORTANT - the embed video format has to change so that it is exactly like below with the /v/ and &hl=en_US&fs=1 and &wmode=opaque for the mask--%>
<param name="movie" value="http://www.youtube.com/v/fBZTbCrM2eQ&hl=en_US&fs=1&wmode=opaque ">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/fBZTbCrM2eQ&hl=en_US&fs=1&wmode=opaque"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="640" height="385" wmode="Opaque"></embed>
</object>
</div>
</div>
非常感谢。
答案 0 :(得分：30)
你需要重置视频的链接，我有一个类似的问题，这是我如何解决它，我在这个过程中使用了jQuery。
//First get the iframe URL
var url = $('#YourIFrameID').attr('src');
//Then assign the src to null, this then stops the video been playing
$('#YourIFrameID').attr('src', '');
// Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link
$('#YourIFrameID').attr('src', url);
选中此answer
答案 1 :(得分：1)
好吧，您只需要更改 iframe 标记的来源 (src) 属性值。就这么简单！ ：）
使用javascript，您可以按照以下方式执行此操作：
var stopButton = document.getElementById('video-close-button-id');
stopButton.onclick = function() {
var myPlayer = document.getElementById("youtube-player-id");
myPlayer.setAttribute("src", " ");
};
快乐的编码。
答案 2 :(得分：0)
//在HTML中
<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
<div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
//在apps.js
中function destroyVideo(){
var url = $('#youtubePlayer').attr('src');
$('#youtubePlayer').attr('src', '');
$('#youtubePlayer').attr('src', url);
}
//这适用于Foundation 6.2