CODEWITHSUNDEEP
javascriptjqueryvimeo
user3573535
user3573535

Reputation: 555

Vimeo video and bootstrap modal, dynamic loading of contnent

I have some piece of code:

<a href="https://www.player.vimeo.com/video/158784449" target="ifr" class="icon-play" data-toggle="modal" data-target=".video1"></a>

<!-- Video modal -->
<div class="modal video1" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
            <iframe name="ifr" src='' width="900" height="490" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
    </div>
</div>


<script>
$(document).on("click", "a", function (e) {
    e.preventDefault();
    var title = $(this).prop('title'),
        id = $(this).prop('id');
    $(".modal-title").text(title);
    $(".modal-body").html($("<iframe src=" + id + "></iframe>"));
});

So, on link click, i want to get url of vimeo video, and show this in modal. But if i try this, i see this error in console.

XMLHttpRequest cannot load https://player.vimeo.com/video/158784449. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Modal window is shown but without contant.

Upvotes: 0

Views: 1519

Answers (1)

SilentTremor
SilentTremor

Reputation: 4912

I added a a jsfiddle where you can check what is wrong

to make it work on your local host without https use like this:

<a href="http://player.vimeo.com/video/158784449" target="ifr" class="icon-play" data-toggle="modal" data-target=".video1"></a>

<!-- Video modal -->
<div class="modal video1" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
            <iframe name="ifr" src='' width="900" height="490" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
    </div>
</div>

and insert anchor href to iframe src:

$(document).on("click", "a", function (e) {
    e.preventDefault();
    var title = $(this).prop('title'),
        href = $(this).prop('href');
    $(".modal-title").text(title);
    $(".modal-body").html($("<iframe src=" + href + "></iframe>"));
});

Upvotes: 1

Related Questions