CODEWITHSUNDEEP
htmlcssvideo
VenoM
VenoM

Reputation: 463

How can I stretch the width of my video in HTML?

I'm trying to add a video using the video HTML tag.

This is the CSS I'm using:

.video { 
width: 100%;
height: 500px;
-webkit-transform: scaleX(2); 
-moz-transform: scaleX(2);
}
.video:before {
background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat;
width:100%;
min-height:500px;
}

and this is the HTML I'm using:

<div class="video">
<video width="1366" height="500" autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>

I want the video to be stretched (as it is), but it's width is a bit too much that it exceeds. As you can see in THIS image, the video's width exceeds the boundaries and hence adds a horizontal scroller. I was hoping someone can help me fix this width problem of mine.

And this is the webpage I'm working on..

Upvotes: 1

Views: 2584

Answers (3)

LKG
LKG

Reputation: 4192

Changes in html and css

I posted working snippet following.

Working pen

working pen

   .video { 
   width: 100%;
   height: 500px;
   position:relative;
   /* -webkit-transform: scaleX(2);  */
  /* -moz-transform: scaleX(2); */
}
.video:before {
   background: rgba(0,0,0,0.5); /* You can use here image */
   width:100%;
   height:500px;
   content:'';
   position:absolute;
   top:0;
   left:0;
}
<div class="video">
  <video width="100%" autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>

Upvotes: 1

Sneha Bharti
Sneha Bharti

Reputation: 226

Remove width and height from html

<div class="video">
    <video autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    </video>
</div>

And change the following CSS as follows:`

.video { 

        width: 100%;
        height: 100%;
        overflow: hidden;
        -webkit-transform: scaleX(1); 
        -moz-transform: scaleX(1);
        }
        .video:before {
        background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat;
        width:100%;
        min-height:500px;
        }

Upvotes: 0

Asad Khan
Asad Khan

Reputation: 98

From the spec for :

Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.

There are no provisions for stretching the video instead of letterboxing it. This is likely because stretching gives a very bad user experience, and most of the time is not what is intended. Images are stretched to fit by default, and because of that, you see lots of images which are badly distorted online, most likely due to a simple mistake in specifying the height and width.

You can achieve a stretched effect using CSS 3 transforms, though those aren't fully standardized or implemented in all browsers yet, and the ones in which it is implemented, you need to use a vendor prefix such as -webkit- or -moz-. Here's an example:

<!DOCTYPE html>
<style>
video { 
  -webkit-transform: scaleX(2); 
  -moz-transform: scaleX(2);
}
</style>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>

Upvotes: 0

Related Questions