I spent 1.5 hours deleting code and comparing and found that JavaScript initiated events just can’t get the video going. One all-mighty Googling [1][2]  revealed that, “embedded media cannot be played automatically in Safari on iOS – the user always initiates playback.” Damn.

It looks like a dead end. But wait. How did videojs-youtube managed it?

The magic:

pointer-events: none;

What is pointer-events? Quote:

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go “through” the element and target whatever is “underneath” that element instead.

And with property “none”, when user clicks on the div, it behaves as if the click goes right through this div and lands on the layer underneath.

So after we add this to the poster layer, when user clicks on the play button, they are actually clicking on the real video. After the first user initiated media control action, later actions could be managed through JavaScript.