jquery – 停止iFrame中的YouTube视频外部按钮单击

我知道有类似的问题,但我还没有能够让它上班.

此代码显示一个位于iframe内的YouTube视频.当点击按钮(emsbinstartbutton)时,视频被隐藏并替换为占位符.如果这个占位符(3bytwo)关闭,则视频应再次显示.

目前这个功能很好,除了当视频被隐藏后,它会继续播放(你可以听到音频,当你回去,你可以看到它仍在播放).隐藏视频时应停止.

<%@ 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并附加

// 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&gt ;:

<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',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 &amp;hl=en_US&amp;fs=1  and  &wmode=opaque for the mask--%>
                <param name="movie" value="http://www.youtube.com/v/fBZTbCrM2eQ&amp;hl=en_US&amp;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&amp;hl=en_US&amp;fs=1&wmode=opaque"
                    type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
                    width="640" height="385" wmode="Opaque"></embed>
            </object>

        </div>
    </div>

非常感谢.

//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);