CODEWITHSUNDEEP
csshtml
Billy Logan
Billy Logan

Reputation: 2520

How to make video responsive for all the screen sizes?

First of all, the video is kinda scaled and I'd love it to fit in the whole screen. Besides that, I can't figure out how to make video responsive on all screen sizes.

HTML

<div class="spread-video">
  <video src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" autoplay="" loop="">
  </video>
</div>

CSS

.spread-video {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Does anybody know how to achieve this? Thank you in advance!

Upvotes: 3

Views: 8098

Answers (4)

rohit kumar
rohit kumar

Reputation: 81

Try this

position: relative;

padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

padding-top: 25px;

or this one

position: absolute;

width: 100%!important;

height: 100%!important;

Upvotes: 0

mlegg
mlegg

Reputation: 832

https://jsfiddle.net/mlegg10/fsftz8rt/4/

/* Flexible iFrame */

.flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Target the <video> instead of the parent div, see fiddle: https://jsfiddle.net/m1pz6zcu/4/ 

.spread-video > video {
  width: 100%;
}

Since the aspect ratio of the video is different from that of the view port, a work around for the issue is to make the video width bigger then the viewport width, center it and hide the overflow. See fiddle: https://jsfiddle.net/m1pz6zcu/6/

.spread-video > video {
  width: 200%;
  margin-left: -50%;
}
.spread-video{
  overflow: hidden;
}

Upvotes: 3

Scott McKeand
Scott McKeand

Reputation: 540

Add the following css

.spread-video video {
  width:100%;  
}

Upvotes: 1

Related Questions