Turlestew Turlestew - 6 months ago 19
Javascript Question

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>

Answer

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

Comments