Video.js: Make Play-Button centered (or centerable)

[frog23]

With the new version (4.0), the play button for videos is in the upper left corner. I still can not decide if this is a bug or a feature. If this was done intentionally, then please add a parameter so that the person embedding the video can center the button for their video. Currently I am using custom CSS Rules to center the button, but this approach doesn't scale well.

[heff]

It was intentional, but we'll all add an option.

On May 10, 2013, at 7:32 AM, frog23 [email protected] wrote:

With the new version (4.0), the play button for videos is in the upper left corner. I still can not decide if this is a bug or a feature. If this was done intentionally, then please add a parameter so that the person embedding the video can center the button for their video. Currently I am using custom CSS Rules to center the button, but this approach doesn't scale well.

—
Reply to this email directly or view it on GitHub.

[mente]

i second this. What was the intention of moving it to top left corner?

[cladera]

Extending the CSS class you can center it easely.

.vjs-default-skin .vjs-big-play-button
{
top: 50%;
left: 50%;
margin: -4em auto auto -6em;
}

[tommyms]

cladera's solution worked for me, in combination with the "responsive css" from Hexagon Sandbox (http://skybolt.xssl.net/~hexagon2/responsive-video/), even when I use container divs and other stuff.

[itsreallycheryl]

Hi

Do you know of a way of getting multiple videos to play in that same player?

Cheryl

Cheryl's Graphic & Web Design Studio
www.itsreallycheryl.com
Web Design, Logo Creation and Graphic Illustration

From: tommyms
Sent: Friday, July 12, 2013 4:13 AM
To: videojs/video.js
Subject: Re: [video.js] Make Play-Button centered (or centerable) (#502)
cladera's solution worked for me, in combination with the "responsive css" from Hexagon Sandbox (http://skybolt.xssl.net/~hexagon2/responsive-video/), even when I use container divs and other stuff.

—
Reply to this email directly or view it on GitHub.

[rcrooks]

There are various ways to do it -- I'll write a plugin one of these days.
The most straightforward I can think of would be to create an array of URLs
pointing to the different videos -- then set a listener for video complete,
where you'd set the src to the next video. That is, if you don't mind using
the API.

On Fri, Jul 12, 2013 at 11:59 AM, itsreallycheryl
[email protected]:

Hi

Do you know of a way of getting multiple videos to play in that same
player?

Cheryl

Cheryl's Graphic & Web Design Studio
www.itsreallycheryl.com
Web Design, Logo Creation and Graphic Illustration

From: tommyms
Sent: Friday, July 12, 2013 4:13 AM
To: videojs/video.js
Subject: Re: [video.js] Make Play-Button centered (or centerable) (#502)
cladera's solution worked for me, in combination with the "responsive css"
from Hexagon Sandbox (http://skybolt.xssl.net/~hexagon2/responsive-video/),
even when I use container divs and other stuff.

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHubhttps://github.com/videojs/video.js/issues/502#issuecomment-20885941
.

Robert Crooks
Director of Learning Services
Brightcove Inc. http://www.brightcove.com/
P: 617 245 5090 M: 617-584 6128

[itsreallycheryl]

Thank you for the quick response. I am not a developer or anything like that. I just do websites and I have a few pages that I have multiple videos in one player, but they are flash (.flv) files. And now I.E. keeps crashing on those players, and it’s due to the Adobe flash plug-in (so I’ve been told). So I thought I should look for another way of showing the videos.
I don’t know anything about the API, or if it’s something I need or can do without. I’ve been reading but can’t understand any of it. I do want to go with the video js, as it seems the way of the future, but I guess for now I will have to settle for one video at a time, or continue using what I have now.
Here are the pages, if you want to see what I am talking about.
http://www.gospelmusicfestivals.net/teens/

http://www.gospelmusicfestivals.net/children/

They actually work great on FF and in Chrome, but I know a lot of people are viewing them in I.E. and that’s not good. On the children’s page there are two players, one at the top that automatically begins playing... and another at the very bottom of the page that has a bunch of videos for children to watch.

Thank you for any feedback/ideas/suggestions. And keep up the great work!

Cheryl

Cheryl's Graphic & Web Design Studio
www.itsreallycheryl.com
Web Design, Logo Creation and Graphic Illustration

From: rcrooks
Sent: Friday, July 12, 2013 9:21 AM
To: videojs/video.js
Cc: itsreallycheryl
Subject: Re: [video.js] Make Play-Button centered (or centerable) (#502)
There are various ways to do it -- I'll write a plugin one of these days.
The most straightforward I can think of would be to create an array of URLs
pointing to the different videos -- then set a listener for video complete,
where you'd set the src to the next video. That is, if you don't mind using
the API.

On Fri, Jul 12, 2013 at 11:59 AM, itsreallycheryl
[email protected]:

Hi

Do you know of a way of getting multiple videos to play in that same
player?

Cheryl

Cheryl's Graphic & Web Design Studio
www.itsreallycheryl.com
Web Design, Logo Creation and Graphic Illustration

From: tommyms
Sent: Friday, July 12, 2013 4:13 AM
To: videojs/video.js
Subject: Re: [video.js] Make Play-Button centered (or centerable) (#502)
cladera's solution worked for me, in combination with the "responsive css"
from Hexagon Sandbox (http://skybolt.xssl.net/~hexagon2/responsive-video/),
even when I use container divs and other stuff.

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHubhttps://github.com/videojs/video.js/issues/502#issuecomment-20885941
.

Robert Crooks
Director of Learning Services
Brightcove Inc. http://www.brightcove.com/
P: 617 245 5090 M: 617-584 6128
—
Reply to this email directly or view it on GitHub.

[heff]

RE: centering the play button, check out http://designer.videojs.com and look for @big-play-align.

[mente]

@heff nice designer! But why less styles are not available in github repo?

[heff]

Just haven't got to it yet.

---

Steve Heffernan (mobile)

On Jul 13, 2013, at 10:44 PM, Alex Vasilenko [email protected] wrote:

@heff nice designer! But why less styles are not available in github repo?

—
Reply to this email directly or view it on GitHub.

[h0wardch3ng]

fu*k the new version. play button NO CENTER is anti-human design!

[mmcc]

@kawaiiushio The feedback is appreciated, but the language is entirely unnecessary. @heff and @cladera both provided straight forward ways to center the big play button. Is there a reason those don't work for you?

[h0wardch3ng]

@mmcc can you help me edit this .css file.. i can't understand css ...the anthor ‘s design is poor . biginner may be think play-button no center is a BUG ,nobody use video.js...

[h0wardch3ng]

http://wordpress.org/support/plugin/videojs-html5-video-player-for-wordpress is also

[heff]

@kawaiiushio Make your comments more constructive and less aggressive or we'll have to block you. You can use the designer to center the play button.
http://designer.videojs.com

Update these items to center and middle

@big-play-align: left; // left, center, or right
@big-play-vertical-align: top; // top, middle, or bottom

[h0wardch3ng]

@heff the new version have a lot of bug ,it doesn't work in my blog index (wordpress 3.6.1) . i back to the older version , i wish bug can be fixed and use CENTER PLAY-BUTTON as default effect. i don't understand CSS ╮(╯▽╰)╭

[h0wardch3ng]

http://wordpress.org/plugins/videojs-html5-video-player-for-wordpress/ use the new version Video.JS ,your player on wordpress index will be broswer custom default html5 player

[mmcc]

@kawaiiushio I haven't heard of anyone else having issues with that plugin and 3.6.1, but regardless we're getting pretty off topic for both this issue thread and the project issues in general. If you're having problems with the Wordpress plugin, then the Wordpress support forums are a better fit.

[heff]

I'm closing this now since the position can be updated via the designer. We'll continue to consider when button should be in the center and when it should be in a corner.

[h0wardch3ng]

@heff i has changed the LESS , copy the changed CSS to the video.js.css but effect not center ，i am crazy

[heff]

@kawaiiushio I just did the same here and it worked for me. Not sure what might be wrong in your case.
http://jsbin.com/eQonEcU/1/edit

[h0wardch3ng]

@heff

.vjs-default-skin div.vjs-big-play-button{
top: 50%!important;
left: 50%!important;
width:120px!important;
height:80px!important;
margin: -40px 0px 0px -60px!important;
}

this css can do it center...

[h0wardch3ng]

@heff wordpress 3.7.1 blog index can't use video.js http://lovejiani.com/blog/

[heff]

@kawaiiushio If it's not related to this specific issue, open a new issue and be sure to include as much info as possible, e.g. vjs version, browser versions, platform, example page. If this is a Wordpress plugin issue, open it on the wordpress plugin repo.

[DragosMocrii]

to center the button use this:

.vjs-big-play-button {
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}