We Keep Coding

Stop playing iframe video after closing modal window

I need stop video from playing after closing modal window. This is my code:
<div onclick="document.getElementById('id01').style.display='block'" class="mkdf-elements-holder-item-content mkdf-elements-holder-custom-184744" style="padding: 300px 0 200px 0">
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-4">
<header style="background-color:white;" class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.visibility='hidden'"
class="w3-button w3-display-topright">×</span>
<h2 style="background-color:white; color: white"> V </h2>
</header>
<div class="w3-container">
<iframe id="ifr" src="https://www.youtube.com/embed/ZrXbX8cWrvQ" allowscriptaccess="always"> /iframe>
</div>
</div>
</div>
I have tried this code, but it does not work:
<script>
$("#id01").on('hidden.bs.modal', function (e) {
$("#id03 iframe").attr("src", $("#id03 iframe").attr("src"));
});
</script>
Anyone know how I can achieve to stop playing video when I close modal window?

How should jQuery reference and id that is not present in your HTML? #id03 is not existing as pointed out by #Manjuboyz, use #ifr instead for referencing your iframe.
<script>
$("#id01").on('hidden.bs.modal', function (e) {
$("#ifr").attr("src", $("#ifr").attr("src"));
});
</script>
Your approach would require a reload of the entire video. If you have an iframe that contains a <video></video> element, you can just stop it and set it to the beginning:
$('#ifr').contents().find('video').each(function () {
this.currentTime = 0; // set to beginning
this.pause(); // set video to paused
});
You need to use jQuery's contents() to work on the DOM of the iframe.

How to use a play/pause button for multiple html5 videos in javascript?

I'm currently working on a website that has a series of twelve HTML5 videos that starts playing automatically in a separate modal box for each video. Now I want to give the user the control to play and pause the video as well (along with other features but that's not relevant to my current problem).
I've gotten so far that the user are able to click the video itself in order to play and pause it. But the play/pause button i've added does not work right now and the code below will give me a "lastClicked.pause is not a function" error.
I know that the reason is because the lastClicked variable i'm using as a condition inside the if statement will contain a button when I click "play/pause" and a button does not have those functions. I've figured out that much so far, but I'm a bit lost of what my next step should be.
Should I make a reference to the specific video inside the toggleVideo function and replace it with the lastClicked variable or does a more simple solution exist?
EDIT: Added a bit of the HTML for reference
Javascript:
// VIDEO CONTROLS
const portfolio = document.querySelector(".portfolio");
const player = portfolio.querySelectorAll(".viewer");
const toggle = portfolio.querySelectorAll(".toggle");
let lastClicked
function toggleVideo () {
lastClicked = this;
if(lastClicked.paused) {
lastClicked.play();
}
else {
lastClicked.pause();
}
}
// Two different ways to play/pause the video - Clicking the video
// itself and clicking the play/pause button
player.forEach(video => video.addEventListener ("click", toggleVideo ));
toggle.forEach(button => button.addEventListener ("click", toggleVideo ));
HTML:
<section class="portfolio" id="portfolio">
<div class="video-wrapper">
<div class="video-thumbnail"><img src="./media/img/thumbnails/1.hammerfall.jpg"></div>
<button class="video-overlay" id="player" data-modal="videoOne"></button>
</div
><div class="modal-box">
<div class="modal-content">
<span class="close-btn">×</span>
<div class="player">
<video class="player__video viewer" src="./media/video/1.waves.mp4"></video>
<div class="video-controller">
<div class="progress-bar">
<div class="progress-filled"></div>
</div>
<button class="video-play toggle">►</button>
<input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
<button class="video-volume mute">X</button>
</div>
</div>
</div>
</div
><div class="video-wrapper">
<div class="video-thumbnail"><img src="./media/img/thumbnails/2.lordi.jpg"></div>
<button class="video-overlay" data-modal="videoTwo"></button>
</div
><div class="modal-box">
<div class="modal-content">
<span class="close-btn">×</span>
<div class="player">
<video class="player__video viewer" src="./media/video/2.words.mp4"></video>
<div class="video-controller">
<div class="progress-bar">
<div class="progress-filled"></div>
</div>
<button class="video-play toggle">►</button>
<input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
<button class="video-volume mute">X</button>
</div>
</div>
</div>
</div
>
</section>

Essentially you need to associate your buttons with your videos.
Currently toggleVideo() assumes that it's running in the context of a video element, whereas it could be a video or a button associated with a video.
You don't know show your HTML structure, but for this answer I'll use the following video-button relationship.
<div>
<video />
<button>Toggle</button>
</div>
...ergo in my contrived example, the button is the next sibling of the video. It doesn't matter what the precise relationship is between video and button, merely that we establish and cater for it inside toggleVideo().
So, that now becomes:
function toggleVideo () {
//establish video - might be #this, or might be prev sibling of #this
let vid = this.tagName == 'VIDEO' ? this : this.previousSibling;
lastClicked = vid;
vid.paused ? vid.play() : vid.pause();
}

How to get the source from a video element inside a div and pass it on to another video element - javascript

Im really new to JavaScript and I started a new project that consists in a video player and editor.
I have this modal Box:
<div class="modal" id="myModal">
<div class="modal-header">
</div>
<div class="modal-body">
<video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video>
</div>
<div class="modal-footer">
</div>
</div>
And I have this video previews that I've done like this:
<article hover class="thumb">
<div id="myModal" class="modal">
<div class="modal-content" id="ModalVideo">
<span class="close">×</span>
</div>
</div>
<img src="images/thumbs/eminem.jpg" class="image" alt="">
<div class="video" id="ClickHere"><video src="images/movie.mp4.mp4" autoplay muted class="videoPreview" id="Video1"></video></div>
</article>
<article hover class="thumb">
<div id="myModal" class="modal">
<div class="modal-content" id="ModalVideo">
<span class="close">×</span>
</div>
</div>
<img src="images/thumbs/eminem.jpg" alt="" class="image" />
<div class="video" id="ClickHere"><video src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" autoplay muted class="videoPreview" id="Video2"></video></div>
</article>
What I need is this: When the user clicks on the <div class="video"> inside the article I have to get the source of the video element inside it and pass it on to the source of video element inside the modal box.
For that I've tried to do this in JavaScript:
<script>
function Video()
{
var Source = $("#video1 source").attr("src");
$('#ModalVideo video source').attr('src', Source);
$("#ModalVideo video")[0].load();
}
</script>
Which is working but only for the video element with the "video1" ID and I need it work for every video element. Is there a way to get the video source when the user clicks the div without having to attribute an id to every video element and use "onClick"?
Thank you for your help, if you have any questions or suggestions please address them to me.

<div id="myModal" class="modal">
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
If you have a basic modal, you can change the source of video and start to play.. but first, stay away to use same id into different tags in same page. Second; to use "this" as a parameter, is more simple way to catch clicked div or another tag...
<article :hover class="thumb" onclick="Video(this)">
<img src="images/thumbs/eminem.jpg" class="image" alt="" data-video-src="images/movie.mp4.mp4" data-autoplay=1 data-muted=1 />
</article>
<article :hover class="thumb" onclick="Video(this)">
<img src="images/thumbs/eminem.jpg" alt="" class="image" data-video-src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" data-autoplay=1 data-muted=1 />
</article>
When you use "this" as a parameter, dont need any id to find which div was clicked.
<script>
function Video(t){
var src = $(t).attr("data-video-src");
var autoplay = $(t).attr("data-autoplay");
var muted = $(t).attr("data-muted");
if(muted==1)
$("#video1").attr("muted",true);
else
$("#video1").removeAttr("muted");
$("#video1").find("source").attr("src",src);
if(autoplay==1){
$("#video1").attr("autoplay",true);
$("#video1").play();
}else{
$("#video1").removeAttr("autoplay");
$("#video1").pause();
}
}
</script>

change <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video> to <video src="images/movie.mp4.mp4" autoplay muted id="videoPreview"></video> first.
Attach this function to all your div's of class="video" click event
function Video()
{
var Source = this.getElementsByTagName("video")[0].src;
videoPreview.src = Source;
}
You're on gears now.

Add href link to Image that has been displayed via js click

Similar to a question I asked recently but the previous was using mouse over so was rubbish for touch screen.
This is 3 divs with images. on click they individually change to a second image and reset the other 2 to a standard image. this all works ok.
But when the second image in any of the divs is active i would like to be able to click this image and navigate to a different page.
Clearly adding href to the html just navigates and ignores the JS effect.
Thanks for reading.
$(document).ready(function(){
$('#s1').click(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').click(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').click(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300"/>
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" class="std "id="s2" width="300" height="300"/>
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300"/>
</div>
</div>
</div>

You can see if the src now contains 'click'. if not then swap the src and return false to stop the href:-
$('#s1').click(function(e) {
if (!$(this).is('[src*="click"]')) {
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<a href="http://stackoverflow.com/">
<img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300" />
</a>
</div>
<div id="top-box-2" class="col-sm-4">
<a href="http://stackoverflow.com/">
<img src="images/object/standard-2.jpg" class="std " id="s2" width="300" height="300" />
</a>
</div>
<div id="top-box-3" class="col-sm-4">
<a href="http://stackoverflow.com/">
<img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300" />
</a>
</div>
</div>
</div>
To break this down: if (!$(this).is('[src*="click"]')) {
$(this).is allows you to check this against a selector, returning a boolean (true) if it does.
'[src*="click"]' is the selector to determine if the src attribute contains 'click'. Where the * means contains anywhere. There are other combinations like ^= for starts with.
Therefore $(this).is('[src*="click"]') means true if the src has 'click'. But you need to invert this to not contains. That's what the ! is for, meaning if this (the clicked element) has not got 'click' in the src.

Since you're already handling the click event, you'll likely want to perform this logic in that same event. Something structurally like this:
if (/* some condition */) {
window.location.href = someUrl;
}
I guess you'd need to define what that condition is. Would it be based on the current src of the image? Something like this?:
if ($(this).attr('src') === 'images/object/click-1.png') {
window.location.href = someUrl;
}
(You'd also have to define what someUrl is, of course.)

Wordpress Injected youtube videos, play on modal open, pause on modal close

I have youtube videos being injected dynamically with wordpress into multiple modals.
<div class="modal-overlay features-modal" id="modal-<?php echo $do; ?>">
<div class="modal-bg">
<div class="modal-close"></div>
<div class="modal">
<div class="videoWrapper">
<iframe class="youtube-video" src="<?php the_sub_field('youtube_video') ?>?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
</div>
</div>
</div>
What I am trying to accomplish is to get each individual youtube video to play on modal open and pause on modal close. Right now I can get the video to pause on close, but when I try to implement play on open with autoplay=1, it plays again on close (this code does not reflect the play on click).
function modalFadeOut() {
$('.open-modal').fadeOut("fast").removeClass("open-modal");
$('html').css('overflow','');
};
// features scroll video modal
$(".video-button").click(function() {
var Modal = $(this).data("modal-type");
$("#"+Modal).fadeIn("fast").addClass("open-modal");
});
$('.modal-bg').click(function() {
modalFadeOut();
var vid = $(this).find('iframe[src*="youtube"]');
if ( vid.length > 0 ) {
var src = vid.attr('src');
vid.attr('src', '');
vid.attr('src', src);
}
});