Help with html5 vid player code

I’m trying to add functions to this html5 video player.
From here:
I’ve reduced the size of the player, but now it shows the big play button with the poster image behind it (see attached image). When I select the play button, I see the video playing, but it is blocked by the poster image and big play button.
How can I change this so the player has a smaller play button (or player controls bar at the bottom of the player), and the smaller play button disappears when the video plays, and how do I get the poster image to also disappear when the video begins to play? Here’s my current code:

  <video id="_1200k.mp4" class="video-js vjs-default-skin"
  controls preload="auto" width="135" height="125"
  data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
 <source src="http://../video/countdown.mp4" type='video/mp4' />

Any help will be appreciated.

This player uses skins so i believe you can change play icon (it’s actually a symbol from iconic font) size somewhere in the CSS that comes with the player. Use Inspector panel in your browser (F12 in Firefox/Chrome, Ctrl+Shift+I in Opera) to inspect that button and see where is associated CSS file located.

Thank you for your helpful reply. I’ve successfully removed the play button, and the video will play by simply clicking anywhere in the player now. However, when I play it, the poster image doesn’t disappear, so the video is playing but is being blocked from view by the poster image. Any help will that will be appreciated. Here’s the code currently:

<video id="video1" class="video-js vjs-default-skin" controls preload="auto" width="335" height="325"
 poster="/1video/countdown.jpg" data-setup='{}'>
 <source src="/1video/countdown.mp4" type='video/mp4' />

I have resolved this. Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.