We Keep Coding

How can I add a close button to a html video popup?

I have an image on my site, and when you click on the image, a video pops up and starts playing. I am wondering how I can add a close button on this video to go back to website rather than pressing back.
I'm pretty experienced with HTML CSS but very new to JS.
This is the code that causes the popup video.
<div class="image-wrapper">
<a href="assets/video.mp4">
<img src="assets/img.png">
</a>
</div>
Thanks for any help here.

I suggest that, you add all the code. HTML/CSS/JS and so, we can help you.
I recommend that, a snippet, that stackoverflow eases you.
enter image description here
The snippet is:
snippet
If you are new in JS. I recommend work with the framework jQuery.

Using Remodal JS with a Gallery in Expression Engine

Hope someone out there can possibly help - I'm using Expression Engine as the platform, and I am using Remodal (as a modal) to work alongside a gallery. The gallery page consists of multiple images in a masonry-style format, and what I am wanting is basically when the user clicks an image, the Remodal popup kicks in and shows the image in the popup. With the code below, the popup functionality is working no problem, however, the issue is, what ever image on the page you click, the first image and title displays in the popup, and not the image you expect to see (the one you click on).
From what I understand, I need to now use some Javascript in order to popup the image you click on, but I am no good at Javascript to be honest, so any help would be great.
This is the modal HTML:
{exp:channel:entries
channel="gallery"
dynamic="off"
limit="1"
url_title="{segment_3}"
}
<img src="{cf_gallery_image}" alt="{title}" />
<div class="gallery__title">{title}</div>
{if cf_gallery_copy != ""}
<div class="gallery__subtitle">{cf_gallery_copy}</div>
{/if}
{/exp:channel:entries}
So when you click any image on the gallery page, the code above displays a popup but of the first image on the page only, and not the image you expect to see.
The gallery HTML:
{exp:ce_img:pair
src="{cf_gallery_image}"
fallback_src="static/images/fabric-no-image.png"
width="360"
crop="no"
}
{/exp:ce_img:pair}
Thank you.
Mike

Popup image over text in homepage

I have this issue and I don't know how to solve it...
When entering in my homepage, I want to popup a picture so as the visitors could see directly a new event before they enter the website. I tried it with JavaScript but I didn't make it to work.
I don't want to make a new homepage, but I want this picture to pop up over the normal homepage and when clicking the picture it will redirect you to the competition, otherwise by clicking anywhere else it will make the picture go away.
I know how to add the links but I am stacked in the JavaScript part.
If you could help me on how to pop up the picture when someone visit my website I would really appreciate it.

Create a div which contains your pop'in and use jQuery when the page load :
<div id="mypopup">
**** Somes stuff here ****
</div>
$(document).ready(function() {
$("#mypopup").show();
});

Have an image with position: absolute property. And place it wherever you want on screen (show it default)
Use jQuery library, to do the below stuff to hide it.
$('.image-class').click(function(e){
e.stopPropagation();
});
$('body').click(function(e){
$('.image-class').hide();
});

lightbox2 , image inside lightbox linkable?

Is it possible using the Lightbox2 script from
http://lokeshdhakar.com/projects/lightbox2/
to make the images inside a "lightbox", a url.
Lets say i would open a lightbox, and then click on the image inside it, that image could bring me to a new page or some other link.
Tried to look for this more than an hour on google but couldn't find anything with it !
If anyone has any ideas, let me know !
thanks

If you are open to alternatives, I suggest you try Fancybox
http://fancybox.net/

How can I get a link to be recognized by a search engine while being created in javascript?

I designed my own gallery which consists of a bunch of thumbnails on load, and when they are clicked on the image pops out to a bigger picture so the user can see it more clearly. On these pop out windows I have the ability to specify a URL which the user will be sent to if he/she clicks on the popped out image.
Because this whole gallery is being loaded by JavaScript, search engines will not be able to see the links that are attached to the pop out boxes. I thought about putting a text link also below the gallery thumbnails, but I think that would just make the gallery look sloppy. I have also thought about creating a hidden link, but I believe that will be ignored by the search engines and its frowned upon.
Anyone have any idea on how I can get this link to look good, and be visible by search engines?

Googlebot is able to construct much of the page and can access the onClick event contained in most tags. For now, if the onClick event calls a function that then constructs the URL, Googlebot can only interpret it if the function is part of the page (rather than in an external script).
Some examples of code that Googlebot can now execute include:
<div onclick="document.location.href='http://foo.com/'">
<tr onclick="myfunction('index.html')">new page
open new window

Put the link right around your thumbnail:
<img src="thumb.jpg" />
Bind your expand function to the link and cancel the default behavior in your javascript:
$("a.thumb").click(function(e)
{
// show the larger version
e.preventDefault();
});

You could make your thumbnails link to the bigger picture and use JavaScript to ignore that actual link and open the popup with your current functionality. The thumbnails will get indexed and the links will get spider-ed as well.

use jquery event.preventDefault(); This will prevent the link action from happening, and you can do what you want to do with javascript. This is a good way of allowing sites to work for users without javascript enabled, but adding nice features for those that do. This way, the search engines will see the link and follow it, and users will still get the rich javascript experience you are creating.
<a href="link-to-page1.html" class="thumb-link">
<img src="thumbnail1.png" alt="thumb 1" />
</a>
<a href="link-to-page2.html" class="thumb-link">
<img src="thumbnail2.png" alt="thumb 2" />
</a>
<a href="link-to-page3.html" class="thumb-link">
<img src="thumbnail3.png" alt="thumb 3" />
</a>
then in your javascript:
$(document).ready(function(){
$(".thumb-link").click(function(event){
event.preventDefault(); // cancel the hyperlink default action
// do your javascript here
});
});