Develop Reference

Popup video keeps playing in background after closing the popup

I have a button that when clicked, pops up a video that can played.
The problem is that if you close the popup while the video is playing, closing the popup does not stop the video, but it keeps playing in background.
<div>
<a id="click-me">Click Me</a>
</div>
<div id="popup-mpdal" style="display:none;">
<div class="">
<video id="videoplayer" controls poster='<?php echo $block->getUrl("pub/media/video/")?>whats-your-story.png'>
<source src='<?php echo $block->getUrl("pub/media/video/")?>this-is-chris-saint-long-version.mp4' type="video/mp4">
</video>
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>

It's a little unclear as to what's going on here, but when the modal is being closed you aren't doing anything to either pause or reset the video. Here's a pretty simple way to stop it.
var video = document.getElementById("videoplayer");
function pauseVideo(){
video.pause();
}
Now if you call pauseVideo() inside the click handler for your buttons it should stop the video.

Is it possible to mute and unmute sound from <object> and <embed>

So I have an <object> and <embed> (which is the fallback) loaded into a html file (index.html)
like so:
<object id="glitch"
data="skull/Glitch"
width="100%" height="100%"
style="overflow:hidden; width: 100%; height: 100%; overflow-y: hidden;">
<embed id="glitch-embed"
src="skull/Glitch"
width="100%" height="100%">
</embed>
Error: Embedded data could not be displayed.
</object>
Inside the object is an <audio> tag that plays when the glitch happens I want to know if I can mute and unmute the audio tag inside the object and embed via a button in the index.html file how would one go about doing this?
Here is my button in the index.html it also controls other sounds in the index
Html:
<a href="#" class="mute-button MuteOff link">
<i id="mute-icon" class="fa fa-volume-up"></i>
</a>
js
$('.mute-button').on('click tap touch', function() {
var $this = $(this);
if( $this.hasClass("MuteOn") ) {
audio1.volume=1.0;
audio2.volume=1.0;
audio3.volume=1.0;
audio4.volume=1.0;
audio5.volume=1.0;
$this.removeClass("MuteOn").addClass("MuteOff");
$('#mute-icon').removeClass("fa fa-volume-off").addClass("fa fa-volume-up");
} else {
audio1.volume=0.0;
audio2.volume=0.0;
audio3.volume=0.0;
audio4.volume=0.0;
audio5.volume=0.0;
$this.removeClass("MuteOff").addClass("MuteOn");
$('#mute-icon').removeClass("fa fa-volume-up").addClass("fa fa-volume-off");
}
});
Thanks in advance
site I'm working on with this problem: https://ui-unicorn.co.uk

How to load the embeded video only after some click-event was triggered. jQuery

What I have now satisfies me in terms of an overall effect: Click on "show me", it displays an YT Video, when clicked once again - vid will hide etc. BUT even when site is loaded in the first place (and YT video is hidden) - all of its (Mb) size is counted as it was displayed causing the website to load slowly. My question is how to load the embeded video (with its size) only after I clicked on "Show me" element.
This is what I have:
HTML:
<div class="#">
<span class="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</span>
<span class="#" id="shown">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/#" frameborder="0" allowfullscreen></iframe>
</span>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(){
$("#shown").toggle();
});
});
CSS:
#shown {
display: none;
}

Try something like this:
HTML:
<div class="#">
<i class="icon fa-angle-down"></i>Show Me
<div id="i_frame"></div>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(e){
e.preventDefault();
if ($(this).is(".opened") ) {
$(this).removeClass("opened");
$(this).find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down");
$("#i_frame").hide().html("");
} else {
$(this).addClass("opened");
$(this).find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up");
$("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
}
});
});
CSS:
#i_frame {
display: none;
}
https://jsfiddle.net/jeremykenedy/fkcnncjm/

How i can stop Youtube running Video in popup that i have popup?

I have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.

var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds

Colorbox help! Embed a youtube video

I am completely new to javascript and using colorbox. I can get the video to load and close as I would like. However, I don't know how to change the formating of the box or how to make the background more opaque while the pop-up apears. I have the following code:
{js}
<br>
<br>
<h1>hello world! This is soooooo exciting! </h1>
<p><a href="javascript:void jQuery.colorbox({
html:'<iframe width=600 height=400 src=http://www.youtube.com/embed/eh-0knDpn5g frameborder=10 allowfullscreen></iframe>'
})"> <img src="/uploads/features/featured-block-1.jpg" /></a></p>
Also I have been having this weird problem where I close the pop-up, but the background still stays opaque.
If anyone could post some code examples or explain to me how/if the colorbox takes parameters, I would greatly appreciate it.

All options you can find on this page: ColorBox
Here is example:
$.colorbox({ href: 'http://www.youtube.com/embed/eh-0knDpn5g', width: '600px', height: '400px', iframe: true });

<a class='youtube' href='http://www.youtube.com/watch?v=VOJyrQa_WR4'>Business Cats</a>
<script>
$('.youtube').colorbox({iframe: true, width: 640, height: 390, href:function(){
var videoId = new RegExp('[\\?&]v=([^&#]*)').exec(this.href);
if (videoId && videoId[1]) {
return 'http://youtube.com/embed/'+videoId[1]+'?rel=0&wmode=transparent';
}
}});
</script>