I have a video that I want to show to users on the website, I created a button where they click and it shows a youtube video in popup, but when I close it, it still shows "Playing audio" in the tab and you can hear the video still. How can I achieve when they click X or anywhere else(they can closing it too by clicking anywhere) to actually stops the video and its audio.
$(document).ready(function() {
$('#headerVideoLink').magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});
});
#headerPopup{
width:75%;
margin:0 auto;
}
#headerPopup iframe{
width:100%;
margin:0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"/>
<span class="icon-play mr-2"></span>Watch Video</p>
<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" width="854" height="480" src="https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Any help will mean a lot, thanks!
What if you use the iframe content type of the MagnificPopup plugin?
So it would look something like this:
$(document).ready(function () {
$('#headerVideoLink').magnificPopup({
type: 'iframe',
midClick: true,
items: {
// HTML markup of popup, `mfp-close` will be replaced by the close button
markup: '<div class="mfp-iframe-scaler">' +
'<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">' +
'<iframe class="embed-responsive-item" width="854" height="480" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>' +
'</div>',
patterns: {
youtube: {
// URL that will be set as a source for iframe.
src: 'https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1'
}
},
// Templating object key. First part defines CSS selector, second attribute.
// "iframe_src" means: find "iframe" and set attribute "src".
srcAction: 'iframe_src',
}
});
});
https://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type
Or try to clear the iframe source using your original Javascript:
$(document).ready(function () {
$('#headerVideoLink').magnificPopup({
type: 'inline',
midClick: true,
callbacks: {
open: function () {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
},
close: function () {
// Will fire when popup is closed
$('#headerPopup > iframe').attr('src', '');
}
}
});
});
I have two iframes in one page.
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe id="video1" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
I want to access onplay() event of iframe, then i can able to stop second video(#Video1) while playing first one(#Video) and Stop first video(#Video) when playing Second(#Video1).
It is possible using YoutubeAPI but i do not want to use that because i have other url videos not Youtube videos(here i put youtube links instead orignal links to avoid copyright). Is there another way except YoutubeAPI. YoutubeAPI is not working on another link resources. Please Suggest.
It has two <iframe>. First, you need switch between iframe.
Is there a way to change context to iframe in javascript console?
After, here my code how to access to event onPlay() of <iframe>
<script src="https://www.youtube.com/iframe_api"></script>
<div class="module module-home-video">
<span class="module-strip">Latest Product Video</span>
<div id="video"></div>
</div>
<script>
var player, playing = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
height: '360',
width: '640',
videoId: 'xmhtV4270NU',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if(!playing){
alert('onPlay is clicked');
playing = true;
}
}
</script>
I have a YouTube video popup. When I click on the button, the popup appears. But when I close it the sound of the video keeps playing.
How can I stop the sound?
function popup2(id, video) {
$('.popup_overlay').show();
$('#'+id).addClass('activePopup');
$('.activePopup').show();
switch(video) {
case 'video1': $('#video').html('<iframe width="854" height="510" src="//www.youtube.com/embed/kJUmm8-Y5JM?autoplay=1&cc_load_policy=0" frameborder="0" allowfullscreen></iframe>'); break;
}
}
function popup_out() {
$('.popup_overlay').hide();
$('.popup').hide();
$('.popup_overlay').hide();
$('.popup2').hide();
$('.popup').removeClass('activePopup');
$('body').find('label').removeClass('red');
send = false;
}
Here is my HTML code:
<div class="popup2" id="video"></div>
<div onclick="popup2('video', 'video1')">BUTTON</div>
It seems you are just hiding the youtube iframe, so the video is still playing but you can't see it.
You could try to just empty the #video div in your popup_out() function, something like this:
$('#video').html('');
or
$('#video').empty();
Ok, so let me tell you where I'm at. The audio file displays and loads. you can click play to play it. The jQuery isn't autoplaying the material. I'm having to load in the file based on the href of the link. Code is below. Trying to get this to autoplay.
$('.voiceLink a', resbox).click(function(e){
e.preventDefault();
var link = $(this).prop('href'),
audio = $('.audioControl', el.parent());
audio.find('source').prop('src', link);
audio.parent().css('display','inline-block');
audio.find('audio').load();
setTimeout(audio.find('audio').play(), 100);
$(window).scrollTop();
});
resbox = The wrapper box.
The HTML Element:
<div class="audioHide" style="display: none;">
<div class="audioControl" style="position:relative; top:10px; left:50px; display:inline-block;">
<audio controls><source src="#" type="audio/mpeg">
Not Supported
</audio>
</div>
</div>
Example Link:
<a target="_blank" href="http://relatientsounds.s3-website-us-east-1.amazonaws.com/recordings/2456266.mp3">2456266</a>
Edit
try this
audio.find('source').prop('src', link);
audio.parent().css('display','inline-block');
audio.find('audio').load();
//this line
audio.find('audio')[0].play();
Demo http://jsfiddle.net/m25kfy57/1/
I have a page of several videos. One can click a thumbnail to play each video. The problem is for that for greater than 2 videos, the clicking on the 3rd thumbnail doesn't pause the 2nd video so I get 2 videos playing at the same time. I'm also using a fadeOut() to toggle the visibility of each video and this works fine regardless of the number of videos. Therefore, I think the issue is with the get(0) part of the code.
here's a jsfiddle that displays the problem:
http://jsfiddle.net/trpeters1/EyZdy/28/
Additionally, here's a more verbose block of code that should make the problem clear:
$(function(){
$('#video_1,#video_2,#video_3,#video_4,#video_5,#video_6').hide();
$('.icon_1').click(function(){
$('#video_2,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
$('#video_1').fadeIn();
$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).pause();
$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
});
$('.icon_2').click(function(){
$('#video_1,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
$('#video_2').fadeIn();
$('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
$('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
});
$('.icon_3').click(function(){
$('#video_1,#video_2,#video_4,#video_5,#video_6').fadeOut(function(){
$('#video_3').fadeIn();
$('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
$('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
$('.video_3').get(0).play();
});
});
});
and the html:
<div id="video_1">
<div id="mediaplayer">cadillac</div>
<video class="video_1" width="100%" height="100%" controls="controls">
<source src="videos/cadillac_x264.mp4" type="video/mp4" />
<object data="videos/cadillac_x264.mp4" width="100%" height="100%">
</object>
</video>
</div>
<div id="video_2">
<div id="mediaplayer2">nike</div>
<video class="video_2" width="100%" height="100%" controls="controls">
<source src="videos/Nike_Pretty - Computer_x264.mp4" type="video/mp4" />
<object data="videos/Nike_Pretty - Computer_x264.mp4" width="100%" height="100%">
</object>
</video>
</div>
<div id="video_3">
<div id="mediaplayer3">russian standard</div>
<video class="video_3" width="100%" height="100%" controls="controls">
<source src="videos/Russian_Standard.mp4" type="video/mp4" />
<object data="videos/Russian_Standard.mp4" width="100%" height="100%">
</object>
</video>
</div>
When you do the following:
$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0)
the "get(0)" returns the first element that matches the selector - in this case, just the first element that matches ".video_2". The rest of the videos are ignored. To do an action on all of the selected elements, check out jQuery's "each()" method. Also, you can simplify your code down to a more generic approach by doing something like this:
Video 1
Video 2
<video id="video-1"> ... </video>
<video id="video-2"> ... </video>
And then hooking up JS by doing something like this:
$('.video-thumbnail').on('click', function () {
// Just go ahead and pause/reset all the video elements
$('video').each(function () {
this.pause();
this.currentTime = 0;
});
$('#' + $(this).data('video-id')).get(0).play();
});
I've just typed this from my head, but hopefully it will put you in the right direction.
thanks P1aincloth3sM4n, i followed what you said about reseting all videos and making a more generalizable solution, for those interested please see the following working jsfiddle: http://jsfiddle.net/trpeters1/EyZdy/52
Easy solution to play only one HTML5 video element on page using JQUERY:
$(function() {
$("video").each(function() {
this.pauseOthers = function(event) {
$('video').addClass('stopvideo');
$(this).removeClass('stopvideo');
$('.stopvideo').each(function() {
this.pause();
});
};
this.addEventListener("play", this.pauseOthers.bind(this), false);
});
});