CSS Videos

Responsive Web Design - Videos

A responsive web design is simply a design compactable to various design layout use to enable us to actualise this with a video tag that is adjustable to the width property.

Using The width Property

If the width property is set to 100%, the video player will be responsive and scale between devices. A better solution will be to use the max-width property to limited the increment of width of a video as larger devices.

If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size: 

    •       
                    <!DOCTYPE html>	
<html>	
<head>	
<meta name="viewport" content="width=device-width, initial-scale=1.0">	
<style>	
div{
    margin-bottom:10px;
}
.container1 video {
  width: 100%;
  height: auto;
}

.container2 video {
  max-width: 100%;
  height: auto;
}
</style>	
</head>	
<body>	
<p>	Resize your browser window to see how the size of the 
video player will scale the video.</p>	

<div class="container1">	
    <video width="400" controls>	
      <source src="../videos/Tromeur_Kid.mp4" type="video/mp4">	
      <source src="mov_bbb.ogg" type="video/ogg">	
      Your browser does not support HTML5 video.
    </video>	
</div>	

<div class="container2">	
    <video width="400" controls>	
      <source src="../videos/Tromeur_Kid.mp4" type="video/mp4">	
      <source src="mov_bbb.ogg" type="video/ogg">	
      Your browser does not support HTML5 video.
    </video>	
</div>	
</body>	
</html>

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1