We Keep Coding

ng-show not showing after the condition changes to true

I have an image and a YouTube video in my HTML. When the video is not playing I just want to show the image, and when it's playing I just want to show the video.
When the page opens just the image loads (as expected) and when the play button is clicked the image disapears but the video is not showing. If I delete the ng-show of the video element the video works but the problem is that it also appears with the image when then the page loads (it shouldn't).
For the YouTube video I'm using the angular-youtube-mb 1.3.2 version.
HTML
<div class="video-wrapper">
<div class="video">
<img ng-if="!homewelcomeVM.playing && !homewelcomeVM.paused" ng-src="ommited.jpg">
{{homewelcomeVM.playing}}
<youtube-video ng-show="homewelcomeVM.playing" video-url="homewelcomeVM.youtubeUrl" player="homePlayer" player-vars="playerVars" player-width="'100%'" player-height="'100%'"></youtube-video>
</div>
</div>
<div class="blck-cnt animate-fade" ng-show="!homewelcomeVM.playing || homewelcomeVM.paused">
<button type="button" class="play play-lg" hvm-analytics-clicks hvm-where-is="'home'" hvm-action="::'CLICK_PLAY_HOME_VIDEO'" ng-click="homePlayer.playVideo()"><i class="ic-svg ic-play-arrow ic-light ic-36"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ic-play-arrow"></use></svg></i></i></button>
</div>
The control point {{homewelcomeVM.playing}} is updating correctly to true when the play button is pressed.
Controller
$scope.$on('youtube.player.playing', function ($event, player) {
vm.playing = true;
vm.paused = false;
});
Why the video isn't appearing when the controller variable changes to true?

You can add div as a parent of youtube-video tag and use ng-show for the div tag:
<div class="video-wrapper">
<div class="video">
<img ng-if="!homewelcomeVM.playing && !homewelcomeVM.paused" ng-src="ommited.jpg">
{{homewelcomeVM.playing}}
<div ng-show="homewelcomeVM.playing">
<youtube-video video-url="homewelcomeVM.youtubeUrl" player="homePlayer" player-vars="playerVars" player-width="'100%'" player-height="'100%'"></youtube-video>
</div>
</div>
</div>
<div class="blck-cnt animate-fade" ng-show="!homewelcomeVM.playing || homewelcomeVM.paused">
<button type="button" class="play play-lg" hvm-analytics-clicks hvm-where-is="'home'" hvm-action="::'CLICK_PLAY_HOME_VIDEO'" ng-click="homePlayer.playVideo()"><i class="ic-svg ic-play-arrow ic-light ic-36"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ic-play-arrow"></use></svg></i></i></button>
</div>

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();
}

unable to do play/pause in soundcloud

We want to retain the status of iframe in any track clicked in list. But
we are unable to call the play/pause event twice. Play/pause event getting called on the first time when READY event fires.
we are embeding the iframe urlend using flag which we reset on play/pause event of iframe with id="soundcloud_widget" as mentioned below in javascript code.
Html:
<div class="player-container">
<div class="player-top">
<iframe id="soundcloud_widget" name="someFrame" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638724%3Fsecret_token%3Ds-g3rwu&color=e13a7b&auto_play=true&show_user=false&download=false&show_artwork=false" width="420" height="120" frameborder="no" scrolling="no"></iframe>
</div>
<div class="song-header">
<div class="col-xs-9">Track</div>
<div class="col-xs-3 tac pl">Duration</div>
</div>
<div class="songs-container" id="musicli">
<div class="songs">
<div class="col-xs-9">
<a class ="mp3list" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638724%3Fsecret_token%3Ds-g3rwu&color=e13a7b" target="soundcloud_widget">Jagat Kalyani Bhavana</a></div>
<div class="col-xs-3 tac">2:30</div>
</div>
<div class="songs">
<div class="col-xs-9">
<a class ="mp3list" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/420638696%3Fsecret_token%3Ds-dZniI&color=e13a7b" target="soundcloud_widget">Dada Bhagwan na Asim Jay Jay Kar Ho</a>
</div>
<div class="col-xs-3 tac">3:30</div>
</div>
</div>
</div>
Javascript:
var iframeid = "soundcloud_widget";
LoadWidget();
$("a").click(function(e) {
e.preventDefault();
console.log(plyflg);
if(plyflg==false){
urlend='&auto_play=false&show_user=false&download=false&
show_artwork=false';
}
else{
urlend='&auto_play=true&show_user=false&download=false&
show_artwork=false';
}
var url=$(this).attr("href")+urlend;
$("#soundcloud_widget").attr("src", url);
})
function LoadWidget() {
var widget1 = SC.Widget(document.getElementById(iframeid));
widget1.bind(SC.Widget.Events.FINISH, function (e) {
});
widget1.bind(SC.Widget.Events.PLAY, function (e) {
plyflg=true;
console.log('play'+ plyflg);
});
widget1.bind(SC.Widget.Events.PAUSE, function (e) {
plyflg=false;
console.log('PAUSE'+ plyflg);
});
}

I think you have to add the allow="autoplay" attribute to your iframe in order not to have the following message when calling play().

Jquery - Open .next

I am trying to create a script that only opens the next div called .video-overlay.
I do not want to use ID's as there could be up to 30 videos per page.
JS Fiddle: https://jsfiddle.net/w2fqrzbw/
At the moment the script is affecting both... is there a way of targetting the next div named .video-overlay?
HTML:
<span class="video-trigger">Button 1 </span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 1
</div>
</div>
<!-- Close video popup-->
<br><br/>
<br><br/>
<br><br/>
<span class="video-trigger">Button 2</span>
<!-- Close video trigger-->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
Popup 2
</div>
</div>
<!-- Close video popup-->
JS:
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$('.video-overlay').fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});
This is how it is laid out in my actual web document:
<div class="col span_6_of_12 ripple-me">
<div class="video-thumbnail" style="background-image: url(<?php echo $video_thumbnail; ?>);">
<span class="video-trigger">
</span>
</div>
<!--Close Video box cta -->
<div class="video-overlay">
<div class="overlay-close">Close</div>
<div class="container">
<iframe allowFullScreen='allowFullScreen' src="<?php echo $video_link; ?>" width="960" height="370" allowtransparency="true" style='position:absolute;top:0;left:0;width:100%;height:100%;' frameborder="0"></iframe>
</div>
</div>
<!-- Close video popup-->
</div>

The issue with your current logic is that it's affecting all .video-overlay elements on click. To fix this you can use DOM traversal to find only the one related to the clicked .video-trigger using next() and closest(). Try this:
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).next('.video-overlay').fadeIn(300).find('video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).closest('.video-overlay').fadeOut(300).find('video').get(0).pause();
});
});

Try using JQuery Next Function :
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
var $videoOverlay = $(this).next('.video-overlay');
videoOverlay.fadeIn(300);
videoOverlay.find('video').get(0).play();
});
});

jQuery provides powerful DOM traversal tools. Be sure to use them
//Video popup
$(document).ready(function() {
$('.video-trigger').click(function() {
$(this).parent().next('.video-overlay').fadeIn(300);
$('.video-overlay video').get(0).play();
});
$('.video-overlay .overlay-close').click(function() {
$(this).parent().fadeOut(300);
$('.video-overlay video').get(0).pause();
});
});

Stop iframe video from playing when exiting modal window

I am having trouble figuring out how to stop a iframe video from playing when I close the modal window. I have seen a lot of answers mention YouTube and using their API but these videos are not from YouTube. I have seen some questions already asked on this subject, ex: Stop all playing iframe videos on click a link javascript. I just don't really understand how to incorporate this into my code.
Question
How can I stop a iframe video from playing when the user closes the modal window. To close each modal window, I use <div class=close-animatedModal>.
If it matters, I am using Wordpress.
Test Page - http://johnmartinagency.com/test-page-2/
HTML
<a id=demo01 href=#animatedModal> <!-- This targets the specific modal -->
<div class=play-container><div class=play-button></div>
</div>
</a>
<div class="mdl-card__title auto-insurance"> <!-- Google Material Design Lite Card -->
<h2 class=mdl-card__title-text>Auto Insurance Made Easy</h2>
</div>
<div class="mdl-card__actions mdl-card--border"> <a id=demo01-a href=#animatedModal class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Watch Video</a> <!-- The play button -->
</div>
<div class=video-length>(5:21)</div>
</div>
<div id=animatedModal> <!-- The Modal Container -->
<div class=modal__box>
<div class=close-animatedModal> <!-- Close modal ->>
<i class="fa fa-times fa-2x close-icon"></i>
</div>
<div class=h_iframe> <!-- The iframe -->
<img class=ratio src=http://placehold.it/16x9>
<iframe src="//fast.wistia.net/embed/iframe/rnx2undr9h?videoFoam=true" allowtransparency=true frameborder=0 scrolling=no class=wistia_embed name=wistia_embed allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen align=center></iframe>
<script src=//fast.wistia.net/assets/external/E-v1.js></script>
</div>
</div>
</div>
</div>
Javascript
I am using animate.modal.js for the modal animation
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js> </script>
<script src="http://sogomarketingagency.com/wp-content/themes/Avada-Child-Theme/js/animatedModal.min.js?ver=4.1.1"></script>
<script>
$("#demo01, #demo01-a").animatedModal ({
modalTarget:"animatedModal",
animatedIn:"zoomIn",
animatedOut:"bounceOut",
color:"rgba(0, 0, 0, 0.95)",
overflow:"scroll"})
</script>

Add this to your script, in the document ready function:
jQuery(function () {
jQuery().on("click", function () {
jQuery('iframe').contents().find('video').each(function () {
this.currentTime = 0;
this.pause();
});
});
});

This solution seems to be working.
Add this JS after you have loaded the above script (just before the closing body tag)
<script type="text/javascript">
$('#myModal').on('hidden.bs.modal', function () {
var videos = $('#video');
video.pause()
});
</script>
Accepted Answer is here