{"action":"created","issue":{"url":"https://api.github.com/repos/videojs/video.js/issues/3082","repository_url":"https://api.github.com/repos/videojs/video.js","labels_url":"https://api.github.com/repos/videojs/video.js/issues/3082/labels{/name}","comments_url":"https://api.github.com/repos/videojs/video.js/issues/3082/comments","events_url":"https://api.github.com/repos/videojs/video.js/issues/3082/events","html_url":"https://github.com/videojs/video.js/issues/3082","id":131472822,"number":3082,"title":"Fluid with Big Play Button","user":{"login":"richardbushell","id":11416714,"avatar_url":"https://avatars.githubusercontent.com/u/11416714?v=3","gravatar_id":"","url":"https://api.github.com/users/richardbushell","html_url":"https://github.com/richardbushell","followers_url":"https://api.github.com/users/richardbushell/followers","following_url":"https://api.github.com/users/richardbushell/following{/other_user}","gists_url":"https://api.github.com/users/richardbushell/gists{/gist_id}","starred_url":"https://api.github.com/users/richardbushell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/richardbushell/subscriptions","organizations_url":"https://api.github.com/users/richardbushell/orgs","repos_url":"https://api.github.com/users/richardbushell/repos","events_url":"https://api.github.com/users/richardbushell/events{/privacy}","received_events_url":"https://api.github.com/users/richardbushell/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-04T21:01:59Z","updated_at":"2016-02-04T21:15:47Z","closed_at":null,"body":"Hi Guys\r\n\r\nLoving the Fluid option, but there's one issue that arises when combining it with Big Play Button (in our case centred).\r\n\r\nWith Fluid you obviously don't need to specify a width and height in the Video tag input to VJS. But if you don't supply dimensions, then the Big Play Button noticably appears at the Top of the screen until it relocates to the Centre of the screen. Note the Poster does NOT do this (Case 1 below).\r\n\r\nIf you specify dimensions (although not needed as they are completely ignored of course for fluid sizing) then the Big Play Button does not appear at the top of the screen, instead it waits until initialisation is finished before only showing correctly in the Centre of the screen (Case 2 below)\r\n\r\nHere's our reduced test cases:\r\nhttps://living.video/fluid1.html\r\nhttps://living.video/fluid2.html\r\n\r\nAdjust the browser window to any size and repeatedly refresh in each case to see the issue. Note that this seems to apply in Chrome and Firefox (latest versions), but not in IE or Edge.\r\n\r\nThe Big Play Button seems to Display too early in the initialisation which makes this very obvious and not desirable. Obviously supplying (unneeded) dimensions as a hack isn't ideal, but I would guess a couple of possible fixes would be:\r\n\r\n1) Create but then Hide the Big Play Button until after last step in initialisation, then UnHide it.\r\n2) Make the Big Play Button creation the last item in initialisation.\r\n\r\nIs there a simple fix in the SRC your end to make the Big Play Button always show only as the last step in the process. The poster doesn't have the same issue of repositioning, so I'm guessing it's a sequence or timing issue. Supplying spurious dimensions seems wrong as a hack?\r\n\r\nRichard"},"comment":{"url":"https://api.github.com/repos/videojs/video.js/issues/comments/180054934","html_url":"https://github.com/videojs/video.js/issues/3082#issuecomment-180054934","issue_url":"https://api.github.com/repos/videojs/video.js/issues/3082","id":180054934,"user":{"login":"gkatsev","id":535884,"avatar_url":"https://avatars.githubusercontent.com/u/535884?v=3","gravatar_id":"","url":"https://api.github.com/users/gkatsev","html_url":"https://github.com/gkatsev","followers_url":"https://api.github.com/users/gkatsev/followers","following_url":"https://api.github.com/users/gkatsev/following{/other_user}","gists_url":"https://api.github.com/users/gkatsev/gists{/gist_id}","starred_url":"https://api.github.com/users/gkatsev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gkatsev/subscriptions","organizations_url":"https://api.github.com/users/gkatsev/orgs","repos_url":"https://api.github.com/users/gkatsev/repos","events_url":"https://api.github.com/users/gkatsev/events{/privacy}","received_events_url":"https://api.github.com/users/gkatsev/received_events","type":"User","site_admin":false},"created_at":"2016-02-04T21:15:47Z","updated_at":"2016-02-04T21:15:47Z","body":"I'm guessing the issue is that the big play button is created before the player div ends up getting sized. So, the big play button's CSS sounds like it is working correctly. Since it calls for 50% top and 50% left on an absolutely positioned div.\r\nThis is an interesting case that we probably didn't think about for the center-positioned element. I do agree we probably should fix it because having it flash from top to middle isn't nice.\r\nA simple solution could be to hide the big play button until the player is ready."}}