Grey overlay when uploading to Vimeo - embed

When we upload a video to vimeo, a grey overlay appears on the video, the background is white before upload and white in IE. Every other browser it has this grey overlay.
An example can be found here by pressing "Watch Video" underneath the photo of the ring.
https://www.clogau.co.uk/jewellery/item/kensington-ring-3skr
I've tried multiple formats when uploading but still not getting anywhere. It could be that there is a default codec all users have on their browsers to keep the background white somehow?
Any help with this would be wonderful
Thank You

Related

How do you style HTML5 audio tag to only show play/pause button image?

I'm trying to get the HTML5 audio tag to show only the play/pause button. This question has been asked before on here, but the answers only gave the option for text 'play!' 'pause!', and not an actual play/pause image .png button.
I have the .png images ready, but having searched the web for days I can't find the answer to this question anywhere. I've tried replacing the text in the above example with an image, but it doesn't work. My coding isn't strong enough, so I keep deleting the code & starting again.
This is what I have:
<audio controls preload="metadata" style=" width:215px; height:18px"><source src="http://www.website.com/audio.mp3" type="audio/mpeg">(Audio player not supported. Click track title to play the audio file)</audio>
Which works just fine, but all I want is for it to work with my own play/pause button image links (2 images), whereby the play image is replaced with the pause image while playing. I don't need the volume, time display, time marker, or the rest of the controls.
Thanks in advance.

How do I force a video to play over an image?

How do I force a video to play over an image when clicking the image thumbnail, and simultaneously scroll back to the top where the player is?
My issue and the context: I am working on a big photographic and video project and for that I decided to (try to... :) I'm not a programmer) build and launch a customized web TV entirely within a Google Blogger blog.
Everything works fine and look beautiful but I decided to fake a customized player (that is actually just a JPEG image) at the exact same place where the player is playing.
The player is working well, but it is playing underneath the image (fake player), so you will hear the sound from player but will not see the video. I would like to know how to force my player to play over this image.
Here is the link of the web TV: http://montreal-images-tv.blogspot.com/
My second issue is that when clicking the thumbnails, the site is supposed to go back to the top to see the player area, but it doesn't work very well!... :(
How can I force the site to scroll automatically to the top when clicking the thumbnails?
PS: I have already tried code like href="#top" with an anchor and it didn't work!
Have you tried adding a z-value to the video container? (higher than the image) eg. z-value for image is 1 and z-value for video is 2.
#video {
z-value:2;
}
#image {
z-value:1;
}
As for the scrolling, I'd try use a little jquery as it has a really nice effect.
$('.clickedClass').click(
function(){
$('html, body').animate({
scrollTop: '0px'
}, 'slow');
});
Any element with the class 'clickedClass', when clicked, will scroll to the top of the page.
UPDATE: here's a jsfiddle for the scrolling: http://jsfiddle.net/CMQNT/

Transparent Video in HTML 5 with Captivate

So I have shot some video on a green screen, removed the background in After Effects and have saved the video in an alpha channel. I want to place the video into Adobe Captivate, these video are going to be a talking narrative throughout the slides. After importing and placing the video where I want it, I go to preview. If I preview the slides in Captivates normal previewer the background is transparent, just the way I want it. But if I preview it or publish it to HTML 5 the background becomes black. HTML 5 is what this project needs to be viewed in. Am I doing something wrong or does HTML 5 not support transparent video. Thanks for your help.
You may need to use canvas element for rendering video with transparency, see https://github.com/m90/seeThru
seeThru - HTML5 video with alpha channel transparencies
This package adds "support" for the lacking alpha channel in HTML5 elements. The original video data will simply be re-rendered into a canvas-element, therefore adding the possibility to use transparencies for your video. Alpha information can either be included in the video's source file (moving) or in a seperate -element (static).

Is there a way to control to the initial screenshot shown on Vimeo?

I have uploaded a video to Vimeo. When someone goes to the video page, it is showing some screenshot from the middle of the video. Is there a way to control what is shown when the page is loaded and before the video is played?
A litte Googling came back with this answer: "Go to the video page, then the settings gear icon on the top right, then thumbnails."

Draw text on top layer of video embed when it's fullscreen

Now, I embed video from youtube and I have a trouble Which I can't draw anything (text, image, etc.) when video is fullscreen. So, what can I do to draw text or image (div) to show it when video fullscreen. I tried to use z-index, but it's not successful. I want to make new controller for my video player don't user youtube controller, but video was embed from youtube. So, when user user fullscreen mod, I want to show a div which contains control like play, pause, etc. I already use ?wmode=transparent but it's not work with fullscreen, It mean my controller not showed when I stay in fulscreen mode
You haven't given much information, but this website details what you require, I think.
http://www.electrictoolbox.com/div-layers-float-over-flash-vimeo-youtube/