I also tried this problem. Overlaying on the native video tag may not be possible because the page after playing will automatically go to the top level (this is what I tested, there may be other methods). My suggestion is to carefully analyze your needs and see if you can implement them in a different way. If not, you can use the open source player framework video.js, etc. It will be much easier to rewrite the button. The phone code is not very standardized, sorry for that.
When you need to display the video with the masked video box
Set the width, height, and overflow:hidden for p; Put the video into the p above, and set position:absolute;top:-100000px; If you set p, it will be invisible
When you need to display the video, just set back the position and top values
I tested it and it works. This is how I use it on my mobile phone
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I also tried this problem. Overlaying on the native video tag may not be possible because the page after playing will automatically go to the top level (this is what I tested, there may be other methods). My suggestion is to carefully analyze your needs and see if you can implement them in a different way. If not, you can use the open source player framework video.js, etc. It will be much easier to rewrite the button. The phone code is not very standardized, sorry for that.
When you need to display the video with the masked video box
Set the width, height, and overflow:hidden for p;
Put the video into the p above, and set position:absolute;top:-100000px; If you set p, it will be invisible
When you need to display the video, just set back the position and top values
I tested it and it works. This is how I use it on my mobile phone