Develop Reference

How to make click only on modal exterior and not on dialog/content?

So I'm making an extension for Google Chrome with my friend, and for most of the features (i.e. calendar, settings, etc.) we open a modal so we don't have to redirect to another page. We are trying to get the modal to close when you click outside of the content. Here's a little markup screenshot to give you an idea of what I'm talking about.
I want to be able to close the modal by clicking outside the white area. Currently it closes even when I click inside the white area. I have tried pretty much everything, including stopPropagation(), pointer-events:none;, and jquery disabling. None of them work for reasons unknown to me. Something weird about Chrome Extensions, I guess.
Here's some of my code so far:
function calendar() {
document.getElementById("calendmodal").style.display = "block";
}
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("calendicon").addEventListener("click", calendar);
document.getElementById("calendmodal").addEventListener("click", closeModal);
document.getElementById("calendmodal").addEventListener("click", function(event) {
event.stopPropagation();
});
});
And HTML:
<div class="icons" id="icons_calendar">
<img src='https://preview.ibb.co/jE76Bm/calendar.png' alt="calendar" border="0" id="calendicon"/>
</div>
<div id=calendmodal class="generalmodal">
<div class="modal-content" id="calendcontent">
<iframe src="https://calendar.google.com/calendar/embed?src=googleapps.wrdsb.ca_ptpdj55efmhg1nb89ruc15fi3k%40group.calendar.google.com&ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no" visibility="hidden" id="calendiframe"></iframe>
<p id=infostuff>For a more extensive calendar and<br>more school tools, visit The SJAM Website.</p>
</div>
</div>
Not really sure what I'm doing wrong, I don't know how to do this in an extension.

I don't know exactly how you show your modal dialog, but my approach for this issue is like this (you may be able to adapt it ot your particular case):
I have a transparent <div> as container that takes up the whole screen, and inside it, using CSS, I position the modal dialog. Something like:
<div id="container" style="position:fixed;top:0;bottom:0;left:0;right:0;display:none">
<div id="myModal" style="position:absolute;width:300px;height:200px;left:100px;top:100px">
<!-- Here goes my content -->
</div>
</div>
With this approach, to display the dialog I do something like:
function openModal(){
document.getElementById("container").style.display = "block";
}
And to close it when clicked on the transparent background but not on the dialog I have:
document.getElementById("container").onclick = function(event) {
if (event.target === this) {
this.style.display = "none";
}
};

In your earlier attempts, where did you execute event.stopPropagation()? It's not included in your code example.
What you need to do is prevent a click event on #calendmodal from bubbling up the DOM and triggering a click event on the body (or another container element) whose event handler closes your modal dialog.
You can do so like this:
document.getElementById("calendmodal").addEventListener("click", function(event) {
event.stopPropagation();
});

stop/pause video when modal closes/hides

I know this has been asked and answered, but I'm not having any luck with any of the options that I've found. I'm trying to have the video stop playback or pause the video when the modal closes. One problem I'm having is the ability to target the close button. I've put console.logs in the functions I've tried and they weren't registering in the console at all. Thanks for any insights able to be offered.
<div id="myModal<%= index + 1 %>" data-id='<%= list.video_id %>'class="modal fade videoModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content bmd-modalContent" >
<div class="modal-body modal-header">
<div class="close-button">
<button id='single' type="button" class="close fancybox-close" data-dismiss="modal" aria-label='Close' ><span aria-hidden="true">×</span></button>
</div>
<div class='embed-responsive embed-responsive-16by9'>
<iframe id='player' class='embed-responsive-item' src="https://youtube.com/embed/<%= list.video_id %>?rel=0&enablejsapi=1" allowFullScreen='true' frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
EDIT:
Sorry, I'had tried so much jQuery that I didn't have any in my app.js folder at the time. Here is what I'm working with now.
$('[id^=myModal]').on('hidden.bs.modal', function(event) {
console.log(player);
event.target.stopVideo();
});

Update the question with more details
Its really hard to tell what is the problem because you only posted html. You having problem with locating close button and your console.log doesnt trigger. Obviously your javascripe file has some errors above your console.log line.
To detect if modal is closed you can use this EVENT
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
I would not change id of modals when generating them, instead I would put data-attr on this element to have one .on('hidden.bs.modal') and to have control over every modal
UPDATE:
from youtube-api docs https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
It has been said that if you embed in your html iframe with the youtube video then in the moment u make something like this in js:
function onYouTubeIframeAPIReady(){
var iframe = document.getElementById("my-video");
video = new YT.Player(iframe);
}
you dont have to define attributes of Player that you create, it will take it from the iframe.
fiddle: http://jsfiddle.net/ux86c7t3/2/

Well, you can simply remove the src of the iframe and then put back again like; so the iframe stops running.
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}

how to stop youtube video playing when container closed

I have seen a few posts about this , but the answers I find are about 1 video and not multiple videos on same page.
I have around 10 videos on my web page. When we click the button for each I want the overlay to pop up which it does. Then a video to be played.
Once the user clicks the exit button I want the video to stop playing.
At the minute if a user does no click pause of the youtube video and exits out it keeps playing in the background.
i will show just 2 video sections for this example:
<div class="play-button">
<i class="fa fa-play"></i>
</div>
<div class="youtube-frame">
<div class="exit-youtube-frame">
<i class="fa fa-times"></i>
</div>
<iframe width="520" height="345" src="<?= $video ?>"></iframe>
</div>
<div class="play-button">
<i class="fa fa-play"></i>
</div>
<div class="youtube-frame">
<div class="exit-youtube-frame">
<i class="fa fa-times"></i>
</div>
<iframe width="520" height="345" src="<?= $video ?>"></iframe>
</div>
Now in Jquery i do this:
jQuery('.play-button').click(function(){
jQuery('#overlay-youtube').show(); // This is the overlay
jQuery(this).next().show();
});
jQuery('.exit-youtube-frame').click(function(){
jQuery(this).parents('.youtube-frame').hide();
jQuery('#overlay-youtube').hide();
});
How do i incorporate method which will stop the video playing for each section?

I had the same problem with showing product videos on a site and stopping them from playing after closing the overlay.
As long as you don't need to pause the video so the user can pick up where they left off, you can simply use the detach() method to store the video object in jQuery then re-add it to the DOM when the user clicks to show it.
Here is my code for just one video (HTML then jQuery):
<div id="product-video-overlay">
<div id="video-container">
<a class="close-overlay">Close</a>
<iframe id="ytplayeroverlay" type="text/html" src="{youtubeURL}"></iframe>
</div>
</div>
var videoOverlay = $('#product-video-overlay');
var videoObject = videoOverlay.find('#video-container');
var hasVideo = 1;
$('li.video-thumb').click(function () {
if (hasVideo == 0) {
videoObject.appendTo(videoOverlay);
}
videoOverlay.fadeIn();
});
$('#product-video-overlay, #product-video-overlay a.close-overlay').click(function (e) {
e.stopPropagation();
videoOverlay.fadeOut();
videoObject.detach();
hasVideo = 0;
});
Since you have multiple videos, you will need some way to identify the play button with its corresponding overlay/video (maybe adding a matching class to each?).
As well, you would probably want to store each detached element into an array to retrieve later by the matching class or whatever method you use to link the button to the proper video.
This is just how I tackled the problem. I know there is a YouTube API available to use, but this did the job.
Good luck!

jQuery - Hide & Show Specific iFrames on a Page

I have a site with several embedded YouTube videos using iframes. I hide all of them to start, they're being covered up by a thumbnail image. They need to show when the thumbnail image is clicked.
I had a working solution, but it required me adding classes or ids to each iframe/thumbnail. I will not be able to add any classes or ids to the iframe or the thumbnail image.
Here is what I had:
$( document ).ready(function() {
<!-- Hide iFrames -->
$(".contentIframe1").hide();
$(".contentIframe2").hide();
<!-- iFrame1 Click Function -->
$(".play-thumbnail1").click(function(){
$(".contentIframe1").show();
});
<!-- iFrame2 Click Function -->
$(".play-thumbnail2").click(function(){
$(".contentIframe2").show();
});
});
HTML:
<iframe class="contentIframe1" width="1280" height="720" src="https://www.youtube.com/embedurl" frameborder="0" allowfullscreen></iframe>
<div class="play-button"></div>
<img class="play-thumbnail1" src="imgurl" alt="" />
Would it be possible to get the same effect without adding different classes to each thumbnail and iframe?
Here's the new html for every single iframe on the page:
<iframe width="1280" height="720" src="https://www.youtube.com/embedurl></iframe>
<div class="play-button"></div>
<img class="play-thumbnail" src="imgurl" alt="" />
Here's the new jQuery:
$( document ).ready(function() {
<!-- Hide iFrames -->
$("iframe").hide();
<!-- iFrame Click Function -->
$(".play-thumbnail").click(function(){
$("iframe").show();
});
});
This of course just hides and shows them all at the same time. I figured I'd have to use .each() to loop through each of the thumbnails and somehow make it only show the corresponding iFrame.
Is this even possible?

You can use children() to get the corresponding iframe
$(".play-thumbnail").click(function(){
//if you need to hide currenly visible iframes use $('iframe').hide()
$(this).closest('div').children("iframe").show();
});

Add class to them -
<iframe class='myclass' ...
And Try this -
$('.myclass').each(function() {
$(this).hide();
})
If you need to add some checks then -
$('.myclass').each(function() {
if (check) {
$(this).hide();
}
})

Switching from a JPG with a YouTube video

I have a 940x520px JPG on my webpage inside of a DIV and I would like to make it a link so when you click on it a YouTube video of 940x520px replaces the JPG and automatically starts playing.
What would be the best way of using Javascript to make this work?
Thanks

Use an onClick (or click if you are using jQuery) to repalce the image with the code for the embedded youtube player.

<div class="image">
<img class="img" />
</div>
<div class="youtube" style="display:none;">
<!--Youtube code here-->
</div>
<script>
$(document).ready(function () {
$(".img").click(function () {
$(".image").hide();
$(".youtube").show();
});
});
</script>