How to add the video tag with full width?-CodePudding

I want to append the video tag with full width in div that id is video using javascript. Could you help me?

let video = document.createElement("video")
video.width = 320;
video.height = 180;
video.style.background = "black"
document.getElementById("video").append(video);

<html>
    <body style="background: lightgrey">
        <div class="container">
            <div id="video"></div>
        </div>
    </body>
</html>

CodePudding user response：

<video width="100%" height="auto" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  message if vodeo does not show
</video>

CodePudding user response：

with

#video {
  width: 100%;
  height: auto;
}

in your css, the video will always use the full available width of its parent, in this case, of "container".

CodePudding user response：

I think it's a comment, but I cannot comment, so I post it as an answer.

let video = document.createElement("video")
video.width = 320;
video.height = 180;
video.style.background = "black"
document.getElementById("video").append(video);

#video video {
    width: 100% !important;
}

<html>
    <body style="background: lightgrey">
        <div class="container">
            <div id="video"></div>
        </div>
    </body>
</html>

CodePudding user response：

Here it is:

<script>
var myVideo = document.getElementById("container");
myVideo.innerHTML()='
    <video id="video" controls>
      <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.'
  </video>
</script>