Adding an X to upper right hand corner of HTML5 fullscreen video

Question

I'm designing a website with a video banner that, upon pressing play, opens a video using an HTML5 player on fullscreen. Here's the JavaScript that is called when the play button is pressed.

function addVideo() {
    var video = $(document).find('#intro-video')[0]; // find the newly inserterd video
    video.src = "../../assets/images/intro.mp4";
    video.controls = false;
    video.load();
    video.play();
    goFullscreen(video);
}

function goFullscreen(myVideo) {
    if (myVideo.requestFullscreen) {
        myVideo.requestFullscreen();
    } else if (myVideo.msRequestFullscreen) {
        myVideo.msRequestFullscreen();
    } else if (myVideo.mozRequestFullScreen) {
        myVideo.mozRequestFullScreen();
    } else if (myVideo.webkitRequestFullScreen) {
        myVideo.webkitRequestFullScreen();
    }
}

I'd like to put an X in the upper right hand corner of the video that, when clicked, simulates pressing the escape key or calls a JavaScript method. Can someone give me an example of that being done?

Answer 1

我前一阵子做了类似的事情，最终使一个div容器变为fullScreen而不是video标签，并且使该视频在该div上的宽度和高度为100％，然后您可以将其他元素定位在div中，只需使用position：相对于容器和重叠项目的绝对/相对