Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

HotSpots and Dynamic settings.

-- Hi all,

I'm hoping for some assistance. I'm Extremely new to web-coding let alone the java side of things and I'm having some issues getting things going with hotspots on my videos on JWPlayer.

I have a Video that I have done which I want a hotspot to appear at 00:01:05.000 and stay till end of video (00:01:15.000)
I looked at the Experiment for hotspots ( but I'm in a little over my head with it. the link just does not appear at all. at any point in the video.

What I have done is I have a basic Page setup:

(running through a WAMP server) localhost/test.html

<!DOCTYPE html>
<title>Raw Testing of Coding</title>
<!-- META -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- CSS -->
<link rel="stylesheet" href="./css/bootstrap.min.css"></link>
<link rel="stylesheet" href="./css/style.css"></link>
<!-- Scripts -->
<script type="text/javascript" src="./scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./scripts/main.js"></script>
<script type="text/javascript" src="./scripts/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key = "";</script> <!-- Removed for posting -->


<div id="hotspots"></div>
<script type="text/javascript">
file: "testingvid.mp4",
height: "50%",
width: "50%"



The Java file is the one obtained from the site just edited'GET','assets/hotspots.vtt',true);

Then the assets I have the 3 files.
and Edited the hotspots.vtt to this



00:01:05.000 --> 00:01:15.000


And lastly my style.css id as follows

#myElement {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
#hotspots {
width: 720px;
height: 405px;
position: absolute;
z-index: 99;
pointer-events: none;
margin: 0 auto;
left: 24%;

#hotspots span {
position: absolute;
width: 40px;
height: 40px;
background-image: url(../assets/spot.png);
background-repeat: no-repeat;
background-position: center center;
opacity: 0.5;
cursor: pointer;
pointer-events: auto;
transition: 0.2s;
transform: scale(0,0);
-webkit-transition: 0.2s;
-webkit-transform: scale(0,0);


Thanks ahead of time for any and all assist, I'm really not coming right with this.

3 Community Answers


JW Player Support Agent  
0 rated :

Have you looked at the code for this demo on Github?
And do you have a link you could send that shows what you have working?


0 rated :

Hi Heidi,

I have looked through it, for some reason including the Main.js file gave me errors, when i placed the scriptinginto the actual page it read happily, now the only issue im having is getting the sizing and placing.

Basically if i move the player around, can the script move with it? as it is It doesnt want to.
Basically if i move the player to middle of screen, and using this coding for it.
<script type="text/javascript">
var playerInstance = jwplayer("player");
file: $("#player").data("video"),
image: "./imgs/logo.png",
stretching: "exactfit",

So its resizing based on the browser window size.
How do I code that the hotspot will position correctly still Say at
of the Players location?


JW Player Support Agent  
0 rated :


Do you have a link you could send? Just a this player setup on a page as you are trying to make it work, would be fine.


This question has received the maximum number of answers.