CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapyoutube
Dennis Lundberg
Dennis Lundberg

Reputation: 73

Refused to display youtube video in iframe

When I open up #myModal the modal appears and my video is playable, though, when I click on my #myModal2 the modal appears but the video is not shown...

What am I missing? 

<div class="list-group">
    <h3 class="bg-ownmade paddingAll removeMargin">
        <span class="fa fa-book" aria-hidden="true"></span> Webbhistoria
    </h3>
    <a href="#" class="list-group-item" data-toggle="modal" data-target="#myModal" 
        data-keyboard="true"><span class="fa fa-film"></span> ABC</a>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                         &times;</button>
                    <h4 class="modal-title">Instruktionsvideo om...</h4>
                </div>
                <div class="modal-body">
                    <iframe width="100%" height="500px" 
                        src="https://www.youtube.com/embed/db-7J5OaSag" 
                        frameborder="0" allowfullscreen></iframe>
                    <p>Bla bla bla</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" 
                        data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="list-group-item" data-toggle="modal" 
        data-target="#myModal2" data-keyboard="true">
            <span class="fa fa-film"></span> ABC
    </a>
    <!-- Modal -->
    <div class="modal fade" id="myModal2" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" 
                        data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Instruktionsvideo om...</h4>
                </div>
                <div class="modal-body">
                    <iframe width="100%" height="500px" 
                        src="https://www.youtube.com/watch?v=IsXEVQRaTX8" 
                        frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" 
                        data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
</div>

Upvotes: 3

Views: 1148

Answers (1)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16814

Change:

src="https://www.youtube.com/watch?v=IsXEVQRaTX8"

To:

src="https://www.youtube.com/embed/IsXEVQRaTX8"

The request is refused for security reasons:

Refused to display 'https://www.youtube.com/watch?v=IsXEVQRaTX8' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Use YouTube's Embed URL

Upvotes: 2

Related Questions