Make Play-Button centered (or centerable) #502

frog23 · 2013-05-10T14:32:22Z

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 · 2013-05-10T17:24:17Z

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

On May 10, 2013, at 7:32 AM, frog23 notifications@github.com 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 · 2013-05-14T07:39:50Z

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

cladera · 2013-05-14T09:46:36Z

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 · 2013-07-12T11:13:34Z

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 · 2013-07-12T15:59:46Z

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 · 2013-07-12T16:20:55Z

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
notifications@github.heygears.comwrote:

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//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 · 2013-07-12T16:35:34Z

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
notifications@github.heygears.comwrote:

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//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 · 2013-07-14T05:13:52Z

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

mente · 2013-07-14T05:44:43Z

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

heff · 2013-07-14T06:22:46Z

Just haven't got to it yet.

Steve Heffernan (mobile)

On Jul 13, 2013, at 10:44 PM, Alex Vasilenko notifications@github.com wrote:

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

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

1a57danc3 · 2013-10-02T05:41:15Z

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

mmcc · 2013-10-02T05:52:10Z

@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?

1a57danc3 · 2013-10-02T11:32:44Z

@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...

1a57danc3 · 2013-10-02T11:33:00Z

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

heff · 2013-10-02T16:21:39Z

@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

1a57danc3 · 2013-10-02T18:15:01Z

@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 ╮(╯▽╰)╭

1a57danc3 · 2013-10-02T18:28:01Z

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 · 2013-10-02T18:46:33Z

@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 · 2013-10-04T18:15:20Z

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.

…ideojs#502

1a57danc3 · 2013-10-30T16:33:39Z

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

heff · 2013-10-30T17:07:53Z

@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

1a57danc3 · 2013-10-31T04:34:13Z

@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...

1a57danc3 · 2013-11-01T06:55:20Z

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

heff · 2013-11-01T15:20:18Z

@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 · 2014-06-25T11:12:40Z

to center the button use this:

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

heff closed this as completed Oct 4, 2013

mmcc pushed a commit to mmcc/video.js that referenced this issue Oct 17, 2013

added new loading and share icons; optional big play centered class. v…

7a4acc7

…ideojs#502

github-actions bot locked as resolved and limited conversation to collaborators May 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make Play-Button centered (or centerable) #502

Make Play-Button centered (or centerable) #502

frog23 commented May 10, 2013

heff commented May 10, 2013

mente commented May 14, 2013

cladera commented May 14, 2013

tommyms commented Jul 12, 2013

itsreallycheryl commented Jul 12, 2013

rcrooks commented Jul 12, 2013

itsreallycheryl commented Jul 12, 2013

heff commented Jul 14, 2013

mente commented Jul 14, 2013

heff commented Jul 14, 2013

1a57danc3 commented Oct 2, 2013

mmcc commented Oct 2, 2013

1a57danc3 commented Oct 2, 2013

1a57danc3 commented Oct 2, 2013

heff commented Oct 2, 2013

1a57danc3 commented Oct 2, 2013

1a57danc3 commented Oct 2, 2013

mmcc commented Oct 2, 2013

heff commented Oct 4, 2013

1a57danc3 commented Oct 30, 2013

heff commented Oct 30, 2013

1a57danc3 commented Oct 31, 2013

1a57danc3 commented Nov 1, 2013

heff commented Nov 1, 2013

DragosMocrii commented Jun 25, 2014

Make Play-Button centered (or centerable) #502

Make Play-Button centered (or centerable) #502

Comments

frog23 commented May 10, 2013

heff commented May 10, 2013

mente commented May 14, 2013

cladera commented May 14, 2013

tommyms commented Jul 12, 2013

itsreallycheryl commented Jul 12, 2013

rcrooks commented Jul 12, 2013

itsreallycheryl commented Jul 12, 2013

heff commented Jul 14, 2013

mente commented Jul 14, 2013

heff commented Jul 14, 2013

1a57danc3 commented Oct 2, 2013

mmcc commented Oct 2, 2013

1a57danc3 commented Oct 2, 2013

1a57danc3 commented Oct 2, 2013

heff commented Oct 2, 2013

1a57danc3 commented Oct 2, 2013

1a57danc3 commented Oct 2, 2013

mmcc commented Oct 2, 2013

heff commented Oct 4, 2013

1a57danc3 commented Oct 30, 2013

heff commented Oct 30, 2013

1a57danc3 commented Oct 31, 2013

1a57danc3 commented Nov 1, 2013

heff commented Nov 1, 2013

DragosMocrii commented Jun 25, 2014