How to disable "full screen" of Html5 video in any browser?

Asked

Viewed 423 times

0

How can I disable full screen in any browser ?

Follow the image where there’s a red circle:

inserir a descrição da imagem aqui

Some solution ?

html5-video

2 answers

1


The CSS controls are these: Enjoy :)

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
<video width="400" height="260" controls="">
    <source src="http://cdn.papercut.com/video/home/home2.mp4" type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>

0

For this would have to use javascript also along with HTML5, exactly as I will put below will work:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Teste Video</title>
</head>
<body>


<div style="text-align:center">
    <button onclick="playPause()">Play/Pause</button>
    <br><br>
    <video id="video1" width="420">
        <source src="p360-2.mp4" type="video/mp4">
    </video>
</div>

<script>
    var myVideo = document.getElementById("video1");

    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }


</script>

</body>
</html>

  • Wpfan, thank you for your reply. I don’t want to lose Html5 video controls attribute. I just want to hide or disable the tela cheia.

  • There are onclick events to make each of the attributes of the video, in its place I would use this way leaving out only the fullscreen option.

Browser other questions tagged html5-video

You are not signed in. Login or sign up in order to post.