我知道有类似的问题，但我不太能让它正常工作。
这段代码展示了一个包含在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>
我尝试了以下方法：
使用 .detach 和 append
// 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);
});
});
即使点击视频停止，但当我尝试返回（追加）时，会弹出一个对象错误提示。
停止和StopVideo
因此，在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();
});
});
在按钮点击时，您仍然可以听到音频，但threebytwo不会显示。
我还添加了这个
<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>
非常感谢。
许多感谢。