The button "Buy now" is shown at the top-right corner from the 10th second to the 10th minute mark. The display of the button is handle by the page itself and it is not an element of the video player. This is recommended so that the button can match the style of the web page.
The player can display controls on the bottom two corners with a larger containers. With smaller container, some player controls can move to the top-right corner. Hence it is recommended to keep new buttons on the top-left. In other corners, you should keep sufficient padding from the top and bottom edges.
src/index.js reads the current time of the video player. The
timeupdate event works the same as the one as in the HTML5 video element.
When the time is between the required range, the button is displayed and hidden
otherwise. This can be modified to use other events to change
the visibility of the custom HTML.