Perfection – with all the different scenarios illustrated.
For a few instances, the video will appear on the screen “already” playing by triggering the JS through another action and not the button. How would I change the innerHTML code accordingly to preserve the Play and Pause toggle function (that is, the default shows “Pause” and changes to “Play” upon clicking)? Tried a few variations of your code, but couldn’t get it to work.
The button is set to display ‘pause’ in the ‘normal’ state – so when you unhover it, it returns to that normal state. The innerhtml replacement acts on the ‘hover’ state since that is that state of the element when it occurs. To workaround this, the button could just be a regular rectangle without any built in hover states.