We Keep Coding

Div isn't displayed after JavaScript element is created

I'm trying to make a div labeled called .overlay-text to be shown when a video is clicked but it isn't showing up according to its content.
const elementsClicked = document.querySelectorAll(".thumbnail, .overlay-text");
const currentThumb = document.querySelector('.container-projects');
elementsClicked.forEach(element => {
element.addEventListener("click", function() {
const parent = this.closest(".item-project");
const thumbnailCurrent = parent.querySelector(".thumbnail-current");
const video = parent.querySelector(".vid");
if (this.classList.contains("thumbnail)) {
if (this.tagName === "VIDEO") {
thumbnailCurrent.innerHTML = "";
const videoCloned = document.createElement("video");
videoCloned.setAttribute("controls", "");
videoCloned.setAttribute("src", this.getAttribute("src"));
videoCloned.setAttribute("type", this.getAttribute("type"));
videoCloned.classList.add("vid-current");
thumbnailCurrent.appendChild(videoCloned);
videoCloned.addEventListener('play', event => {
const videos = currentThumb.querySelectorAll('video');
videos.forEach(v => {
if (v !== event.target) {
v.pause();
}
});
});
videoCloned.addEventListener('pause', event => {
this.parentNode.querySelector(".overlay-text").classList.remove("hidden");
});
videoCloned.play()
} else {
thumbnailCurrent.innerHTML = this.outerHTML;
}
}
else {
video.classList.toggle("hidden");
this.classList.toggle("hidden");
if (video.paused) {
video.play();
} else {
video.pause();
}
}
});
});
const videos = currentThumb.querySelectorAll('video');
videos.forEach(video => {
video.addEventListener("play", function() {
this.parentNode.querySelector(".overlay-text").classList.add("hidden");
});
video.addEventListener("pause", function() {
this.parentNode.querySelector(".overlay-text").classList.remove("hidden");
});
video.addEventListener('play', event => {
videos.forEach(v => {
if (v !== event.target) {
v.pause();
}
});
});
});
This function above makes a gallery works, showing the video or image up when is clicked inside a div labeled .thumbnail-current. It also let the video play if is clicked in its overlay-text and toggle between hidden or not if it is playing or paused.
Here's the HTML code:
<div class="thumbnail-current">
<video src="video.mp4" type="video/mp4" class="vid" id="video1" controls></video>
<div class="overlay-text" id="text1">
<h4>One title</h4>
<p>One description.</p>
</div>
</div>
<div class="container-thumbnail">
<p>&lt</p>
<video src="video.mp4" type="video/mp4" class="thumbnail vid-mini" id="mini1"></video>
<img src="images/image (2).jpg" class="thumbnail" id="mini2" alt="">
<img src="images/image (3).jpg" class="thumbnail" id="mini3" alt="">
<img src="images/image (4).jpg" class="thumbnail" id="mini4" alt="">
<img src="images/image (5).jpg" class="thumbnail" id="mini5" alt="">
<img src="images/image (6).jpg" class="thumbnail" id="mini6" alt="">
<p>&gt</p>
</div>
</div>
<div class="item-project text">
<div class="thumbnail-current">
<video src="video2.mp4" class="vid" id="video2" controls></video>
<div class="overlay-text" id="text2">
<h4>Another title</h4>
<p>Another title.</p>
</div>
</div>
<div class="container-thumbnail">
<p>&lt</p>
<video src="video2.mp4" class="thumbnail vid-mini" id="mini1"></video>
<img src="images/image (2).jpg" class="thumbnail" id="mini2" alt="">
<img src="images/image (3).jpg" class="thumbnail" id="mini3" alt="">
<img src="images/image (4).jpg" class="thumbnail" id="mini4" alt="">
<img src="images/image (5).jpg" class="thumbnail" id="mini5" alt="">
<img src="images/image (6).jpg" class="thumbnail" id="mini6" alt="">
<p>&gt</p>
</div>
</div>
I have tried several lines of codes, but it isn't working.
I want .overlay-text to be shown when videoCloned is created in the .miniatura-current div.
Thanks.

Html <video> tag controls not working properly

I have created a video player with playlist. The problem is that the forward control is not working properly as I cannot forward the video. What can be the problem cause it is working fine when working with static video files.
here is my html code. I have used 3 tabs which loads iframe video, normal video and iframe powerpoint. is this creating the problem by overlapping.
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="row" id="video_player">
<div class="col-lg-4 col-sm-12 playlist">
{% for slides in tutorial.lecture_set.all %}
{% if slides.lecture_content %}
<a href="{{slides.lecture_content.url}}">
<div class="row mt-2">
<div class="col-lg-3">
<img src="{{slides.course.poster.url}}" class="img-fluid" alt="lecture slides">
</div>
<div class="col-lg-9">
<p>{{slides.lecture_title}}</p>
</div>
</div>
</a>
<hr>
{% else %}
<p> There are no slides uploaded.</p>
{% endif %}
{% endfor %}
</div>
<div class="col-lg-8 col-sm-12">
<video class="frame" controls="controls" poster="{{ tutorial.poster.url }}" id="videoarea">
<source src="" type="video/mp4">
<source src="" type="video/webm">
</div>
Js code:
var video_player = document.getElementById("video_player"),
links = video_player.getElementsByTagName('a');
for (var i=0; i<links.length; i++) {
links[i].onclick = handler;
}
function handler(e) {
e.preventDefault();
videotarget = this.getAttribute("href");
filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
video = document.querySelector("#video_player video");
video.removeAttribute("poster");
source = document.querySelectorAll("#video_player video source");
source[0].src = filename + ".mp4";
source[1].src = filename + ".webm";
video.load();
video.play();
}

three different images and sounds on hover

I have three images or divs, there is a sound assigned to each image that plays on hover (ambience1 - ambience3). So far it works. But, as of now, the same sound plays, ambience3 to be precise, no matter if I hit image1, image2 or image3. I'm not really familiar with javascript, so I guess it's the js.
Also, I want the sound to stop, not pause, when the cursor leaves the image, and start from the beginning, when the cursor hits the area again. See code below:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1">
<img class="bottom" src="dcim/20190202_100649 copy.jpg" />
<img class="top" src="dcim/20190202_100649.jpg" />
<audio id="audio1">
<source src="ambience1.mp3"/>
</audio>
</div>
<div id="image2">
<img class="bottom" src="dcim/20190202_102808 copy.jpg" />
<img class="top" src="dcim/20190202_102808.jpg" />
<audio id="audio2">
<source src="ambience2.mp3"/>
</audio>
</div>
<div id="image3">
<img class="bottom" src="dcim/20190202_101713 copy.jpg" />
<img class="top" src="dcim/20190202_101713.jpg" />
<audio id="audio3">
<source src="ambience3.mp3"/>
</audio>
</div>
<script>
var audio = $("#audio1")[0];
$("#image1").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image1").mouseleave(function() {
audio.pause();
});
</script>
<script>
var audio = $("#audio2")[0];
$("#image2").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image2").mouseleave(function() {
audio.pause();
});
</script>
<script>
var audio = $("#audio3")[0];
$("#image3").mouseenter(function() {
audio.play();
audio.loop = true;
});
$("#image3").mouseleave(function() {
audio.pause();
});
</script>
</body>

Try change var audio to three different names in each <script> tag (like in below snippet (which not works due to lack of images and sounds). The reason of previous behaviour was that your audio variable was global and was override by last script. Use audio.currentTime = 0; before pause to play audio from beginning
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image1">
<img class="bottom" src="dcim/20190202_100649 copy.jpg" />
<img class="top" src="dcim/20190202_100649.jpg" />
<audio id="audio1">
<source src="ambience1.mp3"/>
</audio>
</div>
<div id="image2">
<img class="bottom" src="dcim/20190202_102808 copy.jpg" />
<img class="top" src="dcim/20190202_102808.jpg" />
<audio id="audio2">
<source src="ambience2.mp3"/>
</audio>
</div>
<div id="image3">
<img class="bottom" src="dcim/20190202_101713 copy.jpg" />
<img class="top" src="dcim/20190202_101713.jpg" />
<audio id="audio3">
<source src="ambience3.mp3"/>
</audio>
</div>
<script>
var audio1 = $("#audio1")[0];
$("#image1").mouseenter(function() {
audio1.play();
audio1.loop = true;
});
$("#image1").mouseleave(function() {
audio1.currentTime = 0;
audio1.pause();
});
</script>
<script>
var audio2 = $("#audio2")[0];
$("#image2").mouseenter(function() {
audio2.play();
audio2.loop = true;
});
$("#image2").mouseleave(function() {
audio2.currentTime = 0;
audio2.pause();
});
</script>
<script>
var audio3 = $("#audio3")[0];
$("#image3").mouseenter(function() {
audio3.play();
audio3.loop = true;
});
$("#image3").mouseleave(function() {
audio3.currentTime = 0;
audio3.pause();
});
</script>
</body>

Video player still playing after closing modal

HTML:
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">×</button>
</div>
<div class="modal-body">
<video id='videoPlayer' width="100%" height="100%" controls="controls">
<source id='mp4Source' src="" type="video/mp4" />
<!--<source id='oggSource' src="movie.ogg" type="video/ogg" />-->
</video>
</div>
</div>
</div>
</div>
</div>
JS
function play(i){
var x = document.getElementById("hidden_"+i).value;
var player = document.getElementById('videoPlayer');
var mp4Vid = document.getElementById('mp4Source');
player.pause();
// Now simply set the 'src' property of the mp4Vid variable!!!!
mp4Vid.src = x;
player.load();
$('#myModal').modal('show');
}
I play a video inside the modal but when I click out side of the modal before the video completes the modal will hide but the the video continues to play

You can use the event hide.bs.modal. Check the documentation here.
$('#myModal').on('hide.bs.modal', function(){
player.pause();
})

$('#myModal').on('hidden.bs.modal', function (e) {
player.pause();
})

Stop the video from playing

I have two videos on the same page and they open in an iframe. When I close the popup, the video won't stop. It keeps playing. Due to circumstances beyond my control, I have to work with the videos within iframes.
Could anyone help, below is the code for the same:
jQuery:
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
var popup = $this.attr("href");
var $popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var left = left/2 - 340;
var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var top = top/2 - 180;
document.getElementById("vid").style.top = top + "px";
document.getElementById("vid").style.left = left + "px";
document.getElementById("vid1").style.top = top + "px";
document.getElementById("vid1").style.left = left + "px";
$this.closest(".page").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".page").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
HTML:
<div class="popup" id="media-popup"> <!-- video embedded -->
<iframe id="vid" src="http://player.vimeo.com/video/1212121210?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe class="show-2" style="display: none;" id="vid1" src="http://player.vimeo.com/video/112324343?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<a class="video-close" href="#0"></a>
</div><!-- popup -->
<a id="video" data-media="//www.vimeo.com/134243242">video 1</a>
<a id="video" class="video-2" data-media="//www.vimeo.com/00102102">Video 2</a>

This helped me, check it out!
click here to go to the original answer
Basically you need to use iframe or video to start player and that code will stop it when you want it.
var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe !== null ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
if ( video !== null ) {
video.pause();
}
};

To stop the video, not only pause it, you can set currentTime to 0 like:
video.pause()
video.currentTime = 0

This will 'reset' the src attribute for each iframe, stopping the video.
jQuery("iframe").each(function() {
var url = jQuery(this).attr('src');
jQuery(this).attr('src', url);
});
You can also run the following if the iframe is within your domain.
jQuery('iframe').contents().find('video').each(function ()
{
this.pause();
});
jQuery('video').each(function ()
{
this.pause();
});

http://plnkr.co/edit/BWPfY8PiYagfb1zIHUEV?p=preview
This plunker helped me to achieve the solution to my question.
HTML:
<head>
<title>Autostop Videos in Closed Modal</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Autostop Videos in Closed Modal</h1>
<ul class="nav" >
<li>Video 1</li>
<li>Video 2</li>
</ul>
<div class="modal fade" id="video1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 1</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="modal fade" id="video2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 2</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
$(function(){
$('.modal').on('hidden.bs.modal', function (e) {
$iframe = $(this).find("iframe");
$iframe.attr("src", $iframe.attr("src"));
});
});