CODEWITHSUNDEEP
javascripthtmljquery
Byakatonda Benard
Byakatonda Benard

Reputation: 1

how can i increase the sizeof the video using the code below

I have written a code for playing and pausing a video but when I run the code, it appears small on the screen. However, I want to increase the size of the video.

<!DOCTYPE html> 
<html> 
    <body>
        <div class="col-md-10 canvas"></div>
        <center>
            <button onclick="playVid()" type="button">
                Play Video
            </button>
            <button onclick="pauseVid()" type="button">
                Pause Video
            </button>
            <br>
            <video id="myVideo" width="320" height="176">
                <source src="./audios/lp_gateway.mp4" type="video/mp4">
                <source src="./audios/lp_gateway.mp4" type="video/mp4">
            </video>
        </center>

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

            // for playing 
            function playVid() { 
                vid.play(); 
            }

            // for pausing
            function pauseVid() { 
                vid.pause(); 
            } 
        </script>
    </body>
</html>

Upvotes: 0

Views: 34

Answers (1)

Ciber.ai
Ciber.ai

Reputation: 36

If you are referring to the size of the video container, you can increase it by:

  1. Increasing the width and height values in:
<video id="myVideo" width="1280" height="720">
  1. Removing the width and height from the tag and specifying it in the css:
#myVideo {
    width: 1280px;
    height: 720px;
}

If you are referring to the size of the video being played inside the container, you can do it via css, just do the step #2 above and add object-fit: cover; to it:

#myVideo {
    width: 1280px;
    height: 720px;
    object-fit: cover;
}

Upvotes: 1

Related Questions