CODEWITHSUNDEEP
htmlcsshtml5-video
GoldenAdrien
GoldenAdrien

Reputation: 41

How to change size of Html video with css

I am wanting to know how to change the width/height of an html video using only css. Do I need to do something different than what people would normally do to resize an object with css, or can I just do it the normal way.

Upvotes: 0

Views: 5431

Answers (1)

aaron lilly
aaron lilly

Reputation: 274

<!DOCTYPE html> 
<html> 
<body> 

<video width="320" height="240"controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body> 
</html>


#vid {
    width: 500px;
    height: 500px;
}
<!DOCTYPE html> 
    <html> 
    <body> 

    <video controls id="vid">
      <source src="mov_bbb.mp4" type="video/mp4">
      <source src="mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
    </video>

    <p>
    Video courtesy of 
    <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
    </p>

    </body> 
    </html>

Upvotes: 1

Related Questions