HTML5 video fullscreen

HTML5의 비디오태그로 전체화면을 하는 javascript방법과 css방법이다.

1. JAVASCRIPT

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
        elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        }

2. CSS

video {
        position: fixed; right: 0; bottom: 0;
        min-width: 100%; min-height: 100%;
        width: auto; height: auto; z-index: -100;
        background: url(polina.jpg) no-repeat;
        background-size: cover;
    }

HTML

<video autoplay controls id="myvideo">
    <source  src="./movie.mp4" type="video/mp4">
        video 요소를 지원하지 않는 브라우저입니다. 동영상은 다운로드 후 볼 수 있습니다.
</video>