Stop YouTube video within iFrame on external Butto

Question

I know there are similar questions to this, but I haven't quite been able to get it to work.

This code shows a YouTube video which is within an iframe. When a button (emsbinstartbutton) is clicked the video is hidden and replaced with a placeholder. If this place holder (threebytwo) is closed the video should show again.

At the moment this works fine except that when the video is hidden it will continue to play (you can hear the audio and when you go back you can see it is still playing). The video should be stopped when hidden.

 <%@ 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>

I have tried the following:

using .detach and 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);
            });
        });

Even though the video stops on click, when I try to go back (Append) I get an object error pop up.

Stop and StopVideo

So in the iframe, adding &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>

and in the jQuery:

 $(document).ready(function () {
            $("#emsbinstartbutton").click(function () {
                $holdera = $("#divbuyonlineVid").hide();
                $holderb = $(".divbuyonlineVid").hide();
                $("#player").stop();
                $("#threebytwo").show();
            });
        });

Which doesn't change anything. And also:

 $(document).ready(function () {
            $("#emsbinstartbutton").click(function () {
                $("#divbuyonlineVid").hide();
                $(".divbuyonlineVid").hide();
                $("#player").stopvideo();
                $("#threebytwo").show();
            });
        });

On the button click you can still hear the audio, but threebytwo does not show.

I have also added this <script>:

<script type="text/javascript" src="http://www.youtube.com/player_api" ></script>

Can anyone point me in the right direction or see where I'm going wrong?

Edit: shabeer90 describes how to stop the youtube video which got me on my way but if you just wanted to pause it and keep it in the background the following code may be useful:

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 &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>

Many thanks.

Answer 1

Well, you just need to change the source (src) attribute value of iframe tag. It's that simple! :)

With javascript, you can do it as follows:

var stopButton = document.getElementById('video-close-button-id');

stopButton.onclick = function() {
  var myPlayer = document.getElementById("youtube-player-id"); 
  myPlayer.setAttribute("src", " ");
}; 

Happy coding.

Answer 2

//in 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">&times;</span>
        </button>
    </div>
</div>

//in apps.js

function destroyVideo(){
    var url = $('#youtubePlayer').attr('src');
    $('#youtubePlayer').attr('src', '');
    $('#youtubePlayer').attr('src', url);
}

//This work for Foundation 6.2

Answer 3

You need to reset the link of the video, i had a similar problem this is how i solved it, i used jQuery in the process.

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

Check this answer