Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

Brian Schmitz
Brian Schmitz
11,167 Points

Customizing a Vimeo video on your webpage

Does anyone know if it is possible to remove all the Vimeo logos and the "Watch later', "Share" buttons from a video I embedded from Vimeo? Do I need to have a paid account to do that?

I uploaded my own video and then embedded it into the webpage and would ideally like to remove all the buttons, the playbar at the bottom and just have the video full width of the screen with a "play" button in the middle of the video like this site: www.zamplebox.com

Any help is appreciated!

Thank you, Brian

Brian Schmitz
Brian Schmitz
11,167 Points

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

1 Answer

Tom Bedford
Tom Bedford
15,645 Points

Hi Brian, with a free account you can only customise a few things, with a Plus or Pro account you can do a lot more. I think you'd need a paid account for what you're after.

Brian Schmitz
Brian Schmitz
11,167 Points

Yeah that is what it looks like, thanks Tom.

Brian Schmitz
Brian Schmitz
11,167 Points

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

Tom Bedford
Tom Bedford
15,645 Points

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

I am not sure on centering the play button.

Brian Schmitz
Brian Schmitz
11,167 Points

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

Brian Schmitz
Brian Schmitz
11,167 Points

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.

Tom Bedford
Tom Bedford
15,645 Points

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

Brian Schmitz
Brian Schmitz
11,167 Points

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

Tom Bedford
Tom Bedford
15,645 Points

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.

Brian Schmitz
Brian Schmitz
11,167 Points

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

Tom Bedford
Tom Bedford
15,645 Points

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.