Add iframe link with jquery to bootstrap modal

Question

Hello i'm having a modal with a twitch iframe with a streame inside of it. What i need is when i close the modal it resets or pause the twitch stream. Because when i close it now then stream keeps playing, and it should only play sound/video, when the modal is open.

Code:

<div id="myModal@(PredictioItems.Id)" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
            </div>
            <div class="modal-body">
                <p>@PredictioItems.GetPropertyValue("predictdescription")</p>
                <hr />
                <h4>Game stream</h4>
                <div>
                    <iframe width="100%" height="350" frameborder="0" scrolling="no" src="@PredictioItems.GetPropertyValue("livestream")"></iframe>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

I remember this question from yesterday/a few days ago. Have you made any headway since then? Also, you may want to check out these related questions: http://stackoverflow.com/questions/86428/whats-the-best-way-to-reload-refresh-an-iframe-using-javascript, http://stackoverflow.com/questions/2064850/how-to-refresh-an-iframe-using-javascript and http://stackoverflow.com/questions/4249809/reload-an-iframe-with-jquery. You should be able to find a solution with one of those. — Tim Lewis, Nov 27 '15 at 21:20
Try a couple solutions from the questions I linked. Play around with it for a bit, and if you get stuck, post your Javascript and maybe we can debug it for you. Right now, it's hard to find a starting point. — Tim Lewis, Nov 27 '15 at 21:23
Why don't you just unload the frame content and load them again when the dialog opens? — Nilesh, Nov 27 '15 at 21:26

score 0 · Answer 1 · answered Nov 27 '15 at 21:25

The easiest way is to remove iframe on modal.close() and on modal.open() insert it back like in the following example:

var iframe = "<iframe width="100%" height="350" frameborder="0" scrolling="no" src="@PredictioItems.GetPropertyValue("livestream")"></iframe>";
var close = function(){
 $(".some-container").find("iframe").remove();
}
var open = function(){
 $(".some-container").html(iframe);
}

OleHansen · Answer 2 · 2015-11-27T21:50:31.513

0

I FIXED IT YEAY! Did just replace .remove() with .toggle() That worked! Thanks alot for your time!

This was the script i needed:

$('.modal').each(function () {
        var src = $(this).find('iframe').attr('src');

        $(this).on('click', function () {
            $(this).find('iframe').toggle().attr('src', '');
            $(this).find('iframe').toggle().attr('src', src);
        });
    });
});

edited Nov 27 '15 at 21:50

answered Nov 27 '15 at 21:43

OleHansen

111
2
11

Add iframe link with jquery to bootstrap modal

2 Answers2