I am trying to apply an image overlay to embedded videos, so that if the image is clicked the video starts to play. I’m not sure if I can do this without JS. I have a Codepen here. The first vid is the one I have been try to get the effect with; the other two are how they were before I did any monkeying around with the first vid.
You can get the image on top easily but you will need js to hide the image and start the video.
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay img{
position:absolute;
left:0;top:0;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
z-index:2;
}
Pointer-events:none (not IE/Edge) will allow the video to start but of course the image will still block the video even though its running. Therefore you will need some js to remove the image while playing and then put it back when it’s stopped playing.
1 Like
Hi there gandalf458A,
I would use the HTML5 video element instead of “Vimeo” for this project.
You can see an example here…
http://coothead.co.uk/gandalf458A/index.html
…and get all the files used here…
http://coothead.co.uk/gandalf458A.zip
coothead
2 Likes
Thanks chaps. I confess I hadn’t thought of using the <video> element for an embedded vid. Cheers!
I did not attempt it, because I personally prefer to take, what
seems to be, the concise “Vanilla HTML / JavaScript” route. 
But in answer to your specific question, this link…
Can I control the Vimeo player with JavaScript
…may possibly prove beneficial to your project. 
coothead
1 Like
Thanks for the link, squire.
I agree that would be the ideal, but in this case the vids (many dozens of the little chaps) are on Vimeo and relocating them to the same server as the HTML is not feasible.
Well, in that case you’ve definitely got plenty of reading and
inward digesting of the information that is to be found in the
link which was provided in post #6. 
May the gods be with you on your quest.
coothead
1 Like
Hi there gandalf458,
I don’t know how you are getting on with your “Vimeo app” studies,
but thought that you might find this example to be of interest…
http://coothead.co.uk/gandalf458A-with-vimeo-sortof/index.html
All the videos come directly from “Vimeo” like this…
<div class="container">
<div class="video-container">
<video class="player" preload controls poster="images/poster0.jpg">
<source src="https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/4661/8/223309169/781200503.mp4?token=1521231680-0x1f6de35fffb8640a07abbcce8fbc9dc7f690a927" type="video/mp4">
</video>
<img class="starter hide" src="images/facilitation-video.jpg" width="540" height="304" alt="">
</div>
The files can be found in the attachment…
gandalf458A-with-vimeo-sortof.zip (313.5 KB)
coothead
3 Likes
Hi coothead
You are a star! 
I haven’t got that far tbh. I was still looking at a JS solution. This looks much better. Many thanks!
Probably a “black dwarf” ⋆
coothead
1 Like
Hey there @coothead
I have one teeny problem in that when I use the code on my page all works fine except the vids don’t play. 
I assume this is down to the tokens. It doesn’t look as though you are using the Vimeo API, or are you? I can’t see the way you’re using the videos mentioned in any of the documentation, though I could have missed it - there’s rather a lot!
From whence cometh yon tokens?
Hi there gandalf458,
I was waiting for you to reply about that. 
I noticed the problem late last night…
HTTP load failed with status 410. Load of media resource https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/4661/8/223309169/781200503.mp4?token=1521231680-0x1f6de35fffb8640a07abbcce8fbc9dc7f690a927 failed. WebRequest.jsm:342:4
All candidate resources failed to load. Media load paused. index.html
HTTP load failed with status 410. Load of media resource https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/4690/8/223451312/781882385.mp4?token=1521231581-0x658c099f7445e5f52cf080ca52d54a4c4551120d failed. WebRequest.jsm:342:4
All candidate resources failed to load. Media load paused. index.html
HTTP load failed with status 410. Load of media resource https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/4697/8/223488357/782065392.mp4?token=1521231109-0x95ded5516df49035e1fcebc4164ae28ea39bf7ec failed. WebRequest.jsm:342:4
All candidate resources failed to load. Media load paused. index.html
This morning I tried another set of links, and they
initially worked but later on they failed. 
It seems that “Vimeo” has code built in to stop
sneaky buggers like me. 
It looks like it back to the drawing board for you here…
Can I control the Vimeo player with JavaScript
Of course, you could get down on you knees and beg
“Vimeo” to let you have safe links to all your videos
that would work permanently in the video element
coothead
1 Like
Yes, I’ve been looking at that page. I have to keep stopping so my brain can cool down…
- I took the src of the iframe from your “CodePen” say…
https://player.vimeo.com/video/223309169 - I then used the “View Source”
- Unfortunately, it was all on one line , so I C&P’d it to here…
unminify JavaScript, CSS and HTML - Lines #180, #191 and #202 provided the mp4 links.
- I have now tried the first two.
coothead
1 Like
It is beyond my comprehension also. 
Have you considered asking @Paul_Wilkins to try
and unravel the “Vimeo api” mysteries for you?
coothead
1 Like
I see the doc you pointed to says
Note: on iOS and some other mobile devices, you cannot programmatically trigger play.
I’m wondering whether it’s such a good idea to try this after all…
Hi there gandalf458,
tentatively, I think that I may have solved the “token” problem, by using PHP.
Check it out here…
http://coothead.co.uk/gandalf458A-php-version/index.php
I have popped the files into the attachment…
gandalf458A-php-version.zip (327.8 KB)
coothead
1 Like
Hey @coothead
That sounds cunning! I look forward to examining the answer in the morning.
Many thanks.
Ye gods, it IS cunning!