movie player not displaying pause on autoplay

a minor glitch--

If you select any movie on this page https://toddheymandirector.com/reel/

the movie automatically (correctly) begins playing.. however the play icon continues to be displayed. It should be the pause icon since it is playing. If you click on the play icon,  the play icon stays, which is correct because youve paused it. if you click it again and begins plays and finally displays the pause icon which is correct because its playing.

how do i get it to display the pause icon when the page loads and it is playing? a pseudo class for the onload state?

here is the css for the player from the player stylesheet https://toddheymandirector.com/css/video-js3.css

* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-play-control {
width: 25px;
cursor: pointer;
color: #d38d48;
}
.vjs-default-skin .vjs-play-control:before {
content: "\i";
margin-top:8px;
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
content: "\g";
font-size: 25px;
margin-top:8px;

}