Develop Reference

video keeps playing after close modal

I want my code to play a video but when I close the modal the music in the video still plays on the background.
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
I tried using jquery to fix it but nothing happens.
$(document).ready(function () {
var $videoSrc;
$('.btn-play').click(function () {
$videoSrc = $(this).data("src");
});
console.log($videoSrc);
$('#videoModal').on('shown.bs.modal', function (e) {
$("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
})
$('#videoModal').on('hide.bs.modal', function (e) {
$("#video").attr('src', $videoSrc);
})
});

To do what you require you can either stop or pause the video playing when the hide.bs.modal event fires.
You can do this by sending a postMessage to the iframe containing the embedded Youtube player. Note that the enablejsapi=1 parameter has to be included in the embed URL for this to work.
Here's a simplified example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>Play Video</div>
<div>Stop Video</div>
<div>Pause Video</div>
<iframe class="embed-responsive-item" id="video" width="560" height="315" src="https://www.youtube.com/embed/LDU_Txk06tM?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always" allow="autoplay"></iframe>
let videoIframeContent = $('#video')[0].contentWindow;
// stop
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "stopVideo" }), '*');
// pause
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "pauseVideo" }), '*');
Here's a working demo in a jsFiddle and the snippet editor is sandboxed and won't allow video.

That's because the video wasn't stopped.
In the listener that listens to the hide.bs.modal event:
const video = $('#video').get(0);
video.pause();
video.currentTime = 0;

I think You need to use video tag instead of iframe to control video follow link

How to show the selected element in javascript

I would like to open a modal that shows a pdf according to the selected text, but only the first one in the list is shown. What should I do?
index.html
<p><a id="other-activies-link">Semana Omnistack 11</a></p>
<p><a id="other-activies-link">28ª Semana do IME</a></p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
</div>
</div>
scripts.js
const selectedActivity = document.querySelectorAll("#other-activies-link");
selectedActivity.forEach((link) => {
link.addEventListener("click", () => {
document.getElementById(
"myFrame"
).src = `/files/${event.target.textContent}.pdf`;
});
});

you shouldn't use same id element, it would work here but it's frowned upon. I've created a demo with the same class. Of course, the iframe wouldn't load. I've done the explaining in the code itself. See, if it works for you.
const selectedActivity = document.querySelectorAll(".other-activies-link");
selectedActivity.forEach((link) => {
link.addEventListener("click", (event) => { // pass event parameter here
document.getElementById(
"myFrame"
).src = `/files/${event.target.innerText}.pdf`; // use innerText instead
console.clear();
console.log(event.target.innerText);
console.log(event.target.textContent);
});
});
<p><a class="other-activies-link">Semana<br> Omnistack 11</a></p>
<p><a class="other-activies-link">28ª Semana do IME</a></p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
</div>
</div>
See the difference between innerText and textContent here.

You shouldn't use non-unique ids. If you replace id with a class, the code should work.

You should use classes instead, id's of elements should always be unique
<p><a class="other-activies-link">Semana Omnistack 11</a></p>
<p><a class="other-activies-link">28ª Semana do IME</a></p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="myFrame" frameborder="0" allowfullscreen></iframe>
</div>
</div>
This should work,
const selectedActivity = document.querySelectorAll(".other-activies-link");
...

Load an iframe scr only on modal open

My client wants to track if a modal is opened by a visitor, the only way that came to me was loading an iframe into the modal, and then they have a url to track. But the url is loaded whether the modal is opened or not.
I found this which seems to be what I want, they are using Bootstrap whilst I'm using Foundation6, I've tried to convert it to work for Foundation but am clearly missing something.
Obviously there may be a better way to achieve what I need without the below?
The modals:
<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-book'>
<iframe src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-quote'>
<iframe src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-brochure'>
<iframe src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
The script:
var iframes = ["URL1","URL2","URL3"];
$('.reveal-modal').on('open.zf.reveal', function() {
var loaded = $(this).data('loaded');
if(loaded == false) {
var id = $(this).data('id');
$(this).find('iframe').attr('src',iframes[id]);
$(this).data('loaded', 'true');
}
});

You don't need an iframe, unless the iframe contains it's own content or JavaScript. Just send an AJAX request to the server with the URL (and if necessary query parameters).
You must have an .on('open.zf.reveal',...) event though. There's no way around that since you want to know when the modal is open.
$('.reveal-modal').on('open.zf.reveal', function (evt) {
$.ajax({
url: url
method: 'GET'
});
})
Basically, whatever needs to happen in the modal when it's open needs to be done in the event function. So you shouldn't have pre-defined content in the modal.
Hope that helps.

Right, I think I've got it...
The Modals:
<div id="bookDemo" class="reveal-modal medium" data-id="0" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-book'></div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div id="getQuote" class="reveal-modal medium" data-id="1" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-quote'></div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div id="getBrochure" class="reveal-modal medium" data-id="2" data-loaded="false" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-brochure'></div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
The Script:
var appendIFrameDemo = true;
var appendIFrameQuote = true;
var appendIFrameBrochure = true;
$(".bookDemo").click(function() {
if(appendIFrameDemo) {
$('.iframe-container-book').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-book" scrolling="no" style="border:0"></iframe> ');
appendIFrameDemo = false;
}
});
$(".getQuote").click(function() {
if(appendIFrameQuote) {
$('.iframe-container-quote').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-quote" scrolling="no" style="border:0"></iframe> ');
appendIFrameQuote = false;
}
});
$(".getBrochure").click(function() {
if(appendIFrameBrochure) {
$('.iframe-container-brochure').append(' <iframe src="http://www.nursecallsystems.co.uk/modal-brochure" scrolling="no" style="border:0"></iframe> ');
appendIFrameBrochure = false;
}
});
.bookDemo, .getQuote & .getBrochure are the classes on the three buttons to open the modals.

This version fixed the problem of it loading the iframe three times on the homepage:
<div id="getnewsletterModal" class="newsletterReveal reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div class='iframe-container-newsletter'>
<iframe id="iframeNewsletter" src="" scrolling="no" style='border:0'></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
var appendIFrameNewsletter = true;
$(".getnewsletterModal").click(function() {
if(appendIFrameNewsletter) {
$('#iframeNewsletter').attr('src', '[url here]');
appendIFrameNewsletter = false;
}
});

Changing dynamically the src path iframe for Youtube with jquery for Foundation 5

I don't understand why this is not working. I try to send some id of a image when i click on them to a modal. With this id, I change the path of the src of the iframe.
It's work for the first click but after this, it's always the same id if i click on other images
live exemple : http://jsfiddle.net/gRtrX/39/
Images are generate dynamically so i can't use simple id to call her. I just know the src and the id
But the attr doesn't work.
<img src="https://i.ytimg.com/vi/7ZAzp9UtxXo/default.jpg" id="7ZAzp9UtxXo">
<img src="https://i.ytimg.com/vi/hn5gEo_BBOY/default.jpg" id="hn5gEo_BBOY">
<img src="https://i.ytimg.com/vi/DhaGjkTVfIg/default.jpg" id="DhaGjkTVfIg">
<img src="https://i.ytimg.com/vi/gZ_qt7Oo3tE/default.jpg" id="gZ_qt7Oo3tE">
<img src="https://i.ytimg.com/vi/OUEaFKWUiVI/default.jpg" id="OUEaFKWUiVI">
<img src="https://i.ytimg.com/vi/h5cDiLHs2JM/default.jpg" id="h5cDiLHs2JM">
<div id="modal-video" class="reveal-modal small" data-reveal>
<div class="flex-video">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
<!-- end lecteur controles -->
<a class="close-reveal-modal">×</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('img').click(function() {
console.log(this.id);
$(".flex-video > iframe").attr("src", "//www.youtube.com/embed/"+this.id);
$('#modal-video').foundation('reveal', 'open');
});
});
</script>
EDIT : maybe it's a foundation problem, don't understand.

How can I launch and close jQuery Twitter Bootstrap Modal with a YouTube video?

I need a simple demo of how to launch and close a YouTube video in a Twitter Bootstrap Modal from JavaScript (rather than an anchor tag click).
So far I can launch it just fine, but on close it keeps playing in the background.
Here's my html:
<div id="myModalThumbnail"><img src="http://placehold.it/250x150&text=Video%20Thumbnail">
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>​
Javascript:
$('#myModalThumbnail').click(function () {
var src = 'http://www.youtube.com/v/KVu3gS7iJu4&rel=0&autohide=1&showinfo=0&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
​
And a jsfiddle: http://jsfiddle.net/VtKS8/5/
What next?

Well, looks like all I needed to do was remove the src attribute on the button click.
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
JSFiddle: http://jsfiddle.net/VtKS8/6/

This is the updated version for bootstrap 3 using the built in bootstrap hooks
<script>
$( document ).ready(function() {
$('#audiomodal').on('hidden.bs.modal', function () {
$( "audio" ).attr('src', '');
});
});
</script>