javascript - Using bootstrap 3.0 modals to load dynamic, remote content within an iframe

Question

I have tried several of the suggestions posted here on other questions and on stackexchange, and nothing is working to my satisfaction.

I am trying to load dynamic content into a modal. Specifically, YouTube videos or Soundcloud audio within an iFrame. So that any user who visits the site, can enter links for videos or audio. The modal then dynamically loads that users links. Each subsequent user can see each others links, all within a modal. (separate modal loads up for each user)

I can't get this to work quite right. I have created a separate html file called "modal.html" to test this out, which includes an iframe with the proper YouTube/Soundcloud clip.

I am also confused about whether i need to use "data-remote=" inside my tag, or does the href suffice? Or do I use the data-remote inside the first of the modal. Or Both, or either? Neither has worked.

Here's my code:

<a data-toggle="modal" href="modal.html" data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-     remote="modal.html" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

Why neither data-remote or href work on remote sites like youtube

Twitter bootstrap's modal uses AJAX to load remote content via data-remote/href. AJAX is constrained by the same origin policy so accessing a site with a different origin, like youtube, will produce this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource

So neither data-remote or href will do what you want.

JSON: If you were getting json data then you could potentially use JSONP. But since you need html, not json, from sites like youtube we need another approach:

Solution using <iFrame>

An <iframe> will work for youtube and many other remote sites (even this solition doesn't work for all sites as some, like Facebook, explicitly block iframes by setting X-Frame-Options' to 'DENY') .

One way to use an iframe for dynamic content is to:

1) add an empty iframe inside your modal's body:

<div class="modal-body">
    <iframe frameborder="0"></iframe>
</div>

2) add some jquery that is triggered when the modal dialog button is clicked. The following code expects a link destination in a data-src attribute and for the button to have a class modalButton. And optionally you can specify data-width and data-height- otherwise they default to 400 and 300 respectively (of course you can easily change those).

The attributes are then set on the <iframe> which causes the iframe to load the specified page.

$('a.modalButton').on('click', function(e) {
    var src = $(this).attr('data-src');
    var height = $(this).attr('data-height') || 300;
    var width = $(this).attr('data-width') || 400;

    $("#myModal iframe").attr({'src':src,
                               'height': height,
                               'width': width});
});

3) add the class and attributes to the modal dialog's anchor tag:

<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>

Demo Fiddle using youtube