Highlighted

How to fit a video to fill 100% of its div

Explorer ,
Oct 18, 2020

Copy link to clipboard

Copied

Hello,

 

I have a video saved on my desktop that I would like to have fit responsivly in a div, although it does fit 100% of its width, it leaves a space top and bottom and shrinks as I scale the window down.

this is the code Im using..

 

<div class="electroststicTechnology">

<video autoplay loop muted width="100%" height="100%">
<source src="Video/Electrostatic_Technology.mp4" type="video/mp4"/>
<source src="Electrostatic_Technology.ogg" type="video/ogg"/>
</video>

</div>

 

CSS

.electroststicTechnologyPreview {
width: 40%;

height: 500px;
float: left;
position: relative;
overflow: hidden;
margin-right: auto;
margin-left: auto;
}

 

Thanks for your support !

 

I ask because what you have now is inside a floated div that's 40% wide which implies it's surrounded by other content.

 

I obviously read what the OP wanted very incorrectly. The below css would be the correct values for a div which is only 40% of the screen width and 500px high. Either way to keep the video at the height required you are going to have to allow automatic 'trimming' of the left and right side of the video and have it centered horizontally within the div:

 

.electroststicTechnology {
height: 500px;
width: 40%;
position: relative;
}


video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

TOPICS
Code, How to

Views

53

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to fit a video to fill 100% of its div

Explorer ,
Oct 18, 2020

Copy link to clipboard

Copied

Hello,

 

I have a video saved on my desktop that I would like to have fit responsivly in a div, although it does fit 100% of its width, it leaves a space top and bottom and shrinks as I scale the window down.

this is the code Im using..

 

<div class="electroststicTechnology">

<video autoplay loop muted width="100%" height="100%">
<source src="Video/Electrostatic_Technology.mp4" type="video/mp4"/>
<source src="Electrostatic_Technology.ogg" type="video/ogg"/>
</video>

</div>

 

CSS

.electroststicTechnologyPreview {
width: 40%;

height: 500px;
float: left;
position: relative;
overflow: hidden;
margin-right: auto;
margin-left: auto;
}

 

Thanks for your support !

 

I ask because what you have now is inside a floated div that's 40% wide which implies it's surrounded by other content.

 

I obviously read what the OP wanted very incorrectly. The below css would be the correct values for a div which is only 40% of the screen width and 500px high. Either way to keep the video at the height required you are going to have to allow automatic 'trimming' of the left and right side of the video and have it centered horizontally within the div:

 

.electroststicTechnology {
height: 500px;
width: 40%;
position: relative;
}


video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

TOPICS
Code, How to

Views

54

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 18, 2020 0
LEGEND ,
Oct 19, 2020

Copy link to clipboard

Copied

Try the below combination:

 

HTML:

 

<div class="electroststicTechnology">
<video autoplay muted>
<source src="Video/Electrostatic_Technology.mp4" type="video/mp4">
</video>
</div>

 

CSS:

 

body {

margin: 0;

}

.electroststicTechnology {
height: 100vh;

width: 100vw;
}

video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 19, 2020 1
Explorer ,
Oct 20, 2020

Copy link to clipboard

Copied

I didnt use this code as the other code you gave me did the trick. I will keep this in mind, thanks so much for your help, it is greatly appreaciated !

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2020 0
Adobe Community Professional ,
Oct 19, 2020

Copy link to clipboard

Copied

"although it does fit 100% of its width, it leaves a space top and bottom and shrinks as I scale the window down."

Do you really want to devote an entire page to just 1 video and nothing else?  I ask because what you have now is inside a floated div that's 40% wide which implies it's surrounded by other content.   It might help if we better understood what you're trying to achieve and how you expect it to behave on smaller screens. 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 19, 2020 1
LEGEND ,
Oct 19, 2020

Copy link to clipboard

Copied

I ask because what you have now is inside a floated div that's 40% wide which implies it's surrounded by other content.

 

I obviously read what the OP wanted very incorrectly. The below css would be the correct values for a div which is only 40% of the screen width and 500px high. Either way to keep the video at the height required you are going to have to allow automatic 'trimming' of the left and right side of the video and have it centered horizontally within the div:

 

.electroststicTechnology {
height: 500px;
width: 40%;
position: relative;
}


video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 19, 2020 1
Explorer ,
Oct 20, 2020

Copy link to clipboard

Copied

Good evening osgood_

 

This worked great !

Thank you so much for your time in helping me find the solution.

 

🙂

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2020 0
Explorer ,
Oct 20, 2020

Copy link to clipboard

Copied

Hello Nancy,

 

I had only included a clip of code I thought was necesary to help me out / was hoping to achieve a responsive type code that I can make minor tweaks to the styling if needed..

 

Thank you for your time 😉  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2020 0
Adobe Community Professional ,
Oct 20, 2020

Copy link to clipboard

Copied

OK good.  As Osgood mentioned in his first reply, you don't need height, width or the OGG fallback in your markup because all modern browsers support MP4 video.  And dimensions are taken care of by the CSS.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2020 1
Chanel B LATEST
Explorer ,
Oct 26, 2020

Copy link to clipboard

Copied

Thank you for the reply and support.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 26, 2020 0