質問: お世話になります。 mp4動画をフルスクリーンで表示するページを作ろうとしています。 video.html というリンクをクリックした時に動画がフルスクリーンで開くという動きです。 ネット上で検索して同様のことを実装するためのソースが公開されており、開くことは開くのですが、 動画を止めたり、先送りするためのパネルが出てこないので、画面を閉じるか最後まで見るしか選択肢がありません。 videoタグにcontrols属性を入れたのですが、反応しません。 再生開始ボタンをクリックできれば、自動起動は必ずしも必要ではないので、何等かの方法はないでしょうか? アドバイス頂ければ幸いです。 OS:Windows10 ブラウザ:Chrome を使用しています。 ``` Full Screen Movie ```
回答: やりたいことを実現する(フルスクリーンでmp4を表示する)方法についての回答にはならないかもしれず、恐縮ですが、 お困りの「動画を止めたり、先送りするためのパネルが出てこない」箇所についてお答えします。 videoにcontrolsを指定しても、コントロールが出ない理由 .bg-video-wrapがheight:100vhかつoverflow:hiddenになっているため、 動画の下部に表示されるコントロールが見切れて、見えなくなっている。 → overflow:hidden;を消した状態で、画面下方向へスクロールすると、コントロールが見えるのではないかと思います。 動画をクリックしても一時停止等ができない理由 (通常コントロールが見切れていても、動画領域をクリックすれば一時停止等ができると思いますが) .overlayの要素がvideo要素の上に重なっており、video要素を直接クリックすることができず、 (.overlayの要素をクリックしてしまい)動画の一時停止等ができない。 → .overlayのdivを一度消してみると、動画の見えているところをクリックすれば一時停止&再生ができるのではないかと思います。