Customizing a Vimeo video on your webpage

Yeah that is what it looks like, thanks Tom.

Hi Tom,

If I wanted to add an imaged over a video until the "play" button was pressed by the user I would want to use the "poster" attribute pointing to that image, inside the video or iframe tags correct?

Then to get a play button in the center of the screen like the video on zamplebox.com I just want to add span tags with the playbtn inside that video div correct?

Just wanted to make sure I was on the right page. I'm basically trying to replicate the video on zamplebox.com. I know I have to upgrade accounts on vimeo to be able to do that but was playing around with a video somewhere else for practice.

Any help is appreciated. Brian

Hi Brian, I found this for the poster/thumbnail image.

I am not sure on centering the play button.

Thanks Tom, that makes sense in regards to Vimeo. The owner decided to move over to uploading a Youtube video and it looks easy enough to add a thumbnail video there. Do you know if Youtube is the same as Vimeo in that you need to have a paid account to remove all the logos, etc from the video on your webiste? Can you just do the video and nothing else?

Thanks again

I guess my main goal would be to remove the progress bar from the video. I want to put a "play" button in the middle but get rid of the youtube play button that is given when I embed the video. It doesn't look like you need to pay anything with Youtube to be able to customize but I may be wrong.

I think this is all free with YouTube, here are the embedding docs and the section on player controls.

Thanks for the help. Tom. I'll play around with those control settings but that all makes pretty good sense. I already removed the YouTube Logos and View Full Size icon on the video, I'll add the controls then as well.

Another quick question for you - how are you with Javascript / JQuery? I am working on adding left to right movement for photos that I am currently grabbing from Instagram. So right now I have 4 photos across the width of the screen or div but want to add the "<" and ">" options on both sides so the user can click and the page then scrolls to see more. Are you familiar with adding that feature at all?

Thanks again for the help, I appreciate it. Brian

I would start a new topic for a new question - lots of people in the community who can help. There are several tutorials around or pre-made sliders you could use, I like Owl Carousel.

Thanks Tom, that did pull the play controls at the bottom of the video off of the screen. Do you know with Youtube if it is possible to pull off the "play" button in the middle of the screen? I want a play button there just like that but not the Youtube-looking button. I'm trying to remove everything that would resemble Youtube really...you know if that's possible?

Also, before the video is playing I have the video at 100% width of the screen - so all the way across. But when it starts to play I get about 2 inches of black space on the left and right side...is that avoidable do you know?

Last thing - when the video is playing I am still getting advertisements to pop up - same as you would see if you were watching something on Youtube. Do you know how I would remove those from coming up?

Thanks for all the help - it is appreciated.

Brian

Edit Delete

You're getting a bit beyond what I know about this! I imagine the black bars are due to the videos aspect ratio. There may be a javascript solution you could use to solve this, changing the height of the video as necessary to match up with the width to stay in ratio. Not sure on the custom play button, sorry.