CSS Sizing Height of Video Container
1
I am trying to size video containers height but for some reason, its height is unnecessarily big.
CSS:
.indexVideoContainer{
display:flex;
flex-direction: column;
background-color: #fff;
background-image: url(https://bellroy.imgix.net/cms_images/1259/background-texture-repeat.jpg?auto=format&fit=max);
width: 100%;
}
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
padding-bottom:60.25%;
padding-top:30px;
height:0;
overflow:hidden;
border:1px solid black;
}
.videoContainer iframe{
position:absolute;
margin: auto;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
height:60%;
}
Codepen:
https://codepen.io/anon/pen/MZNgYa
Check the .videoContainer class. I added a border for a better demonstration. Its height is unnecessarily big. Expands too much for some reason. How do I make it shorter in a responsive way?
problem image
Edit:
I still have the problem guys.I have managed to fix it with some workaround but i guess i am missing something with video frame and flexbox.
html css
asked Jan 19 at 0:05
peonylastpeonylast
103
add a comment |
1
I am trying to size video containers height but for some reason, its height is unnecessarily big.
CSS:
.indexVideoContainer{
display:flex;
flex-direction: column;
background-color: #fff;
background-image: url(https://bellroy.imgix.net/cms_images/1259/background-texture-repeat.jpg?auto=format&fit=max);
width: 100%;
}
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
padding-bottom:60.25%;
padding-top:30px;
height:0;
overflow:hidden;
border:1px solid black;
}
.videoContainer iframe{
position:absolute;
margin: auto;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
height:60%;
}
Codepen:
https://codepen.io/anon/pen/MZNgYa
Check the .videoContainer class. I added a border for a better demonstration. Its height is unnecessarily big. Expands too much for some reason. How do I make it shorter in a responsive way?
problem image
Edit:
I still have the problem guys.I have managed to fix it with some workaround but i guess i am missing something with video frame and flexbox.
html css
asked Jan 19 at 0:05
peonylastpeonylast
103
add a comment |
1
1
1
I am trying to size video containers height but for some reason, its height is unnecessarily big.
CSS:
.indexVideoContainer{
display:flex;
flex-direction: column;
background-color: #fff;
background-image: url(https://bellroy.imgix.net/cms_images/1259/background-texture-repeat.jpg?auto=format&fit=max);
width: 100%;
}
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
padding-bottom:60.25%;
padding-top:30px;
height:0;
overflow:hidden;
border:1px solid black;
}
.videoContainer iframe{
position:absolute;
margin: auto;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
height:60%;
}
Codepen:
https://codepen.io/anon/pen/MZNgYa
Check the .videoContainer class. I added a border for a better demonstration. Its height is unnecessarily big. Expands too much for some reason. How do I make it shorter in a responsive way?
problem image
Edit:
I still have the problem guys.I have managed to fix it with some workaround but i guess i am missing something with video frame and flexbox.
html css
asked Jan 19 at 0:05
peonylastpeonylast
103
I am trying to size video containers height but for some reason, its height is unnecessarily big.
CSS:
.indexVideoContainer{
display:flex;
flex-direction: column;
background-color: #fff;
background-image: url(https://bellroy.imgix.net/cms_images/1259/background-texture-repeat.jpg?auto=format&fit=max);
width: 100%;
}
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
padding-bottom:60.25%;
padding-top:30px;
height:0;
overflow:hidden;
border:1px solid black;
}
.videoContainer iframe{
position:absolute;
margin: auto;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
height:60%;
}
Codepen:
https://codepen.io/anon/pen/MZNgYa
Check the .videoContainer class. I added a border for a better demonstration. Its height is unnecessarily big. Expands too much for some reason. How do I make it shorter in a responsive way?
problem image
Edit:
I still have the problem guys.I have managed to fix it with some workaround but i guess i am missing something with video frame and flexbox.
html css
html css
asked Jan 19 at 0:05
peonylastpeonylast
103
asked Jan 19 at 0:05
peonylastpeonylast
103
edited Jan 19 at 17:46
peonylast
asked Jan 19 at 0:05
peonylastpeonylast
103
asked Jan 19 at 0:05
peonylastpeonylast
103
asked Jan 19 at 0:05
peonylastpeonylast
103
103
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
html:
<div class="indexVideoText">
sometext
</div>
<div class="videoContainer">
<iframe title="hQ6TSIFM8I0" width="80%" height="80%" frameBorder="0" src="https://www.youtube-nocookie.com/embed/hQ6TSIFM8I0?autoplay=1&loop=1&playlist=hQ6TSIFM8I0&origin=bellroy.com&modestbranding=1&showinfo=0&rel=0&version=3&mute=1"></iframe>
</div>
CSS
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
height:500px;
overflow:hidden;
border:1px solid black;
background-color:red;
padding-top:20px;
padding-bottom:20px;
}
iframe{
position:absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
}
answered Jan 19 at 18:10
Thanveer ShahThanveer Shah
37910
hi thanks for the answer.When i applied that yes container is small but video inside youtube video frame is also small...prntscr.com/m9dzol
– peonylast
Jan 19 at 18:49
Oh that is because i did not give a bigger value to the height just change height:200 to height:500px
– Thanveer Shah
Jan 19 at 18:52
thank you again.one last question is what about puting some extra space on and below container ? prntscr.com/m9e3xm
– peonylast
Jan 19 at 18:59
Yes mam, You just need to go the iframe tag and decrease the height and width to 80% , because right now it is 100% once you change it to 80% then you cN add more padding or margin for more space , I have editied the answer
– Thanveer Shah
Jan 19 at 19:10
actually i meant expanding the videoContainer prntscr.com/m9eaxc
– peonylast
Jan 19 at 19:13
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54262928%2fcss-sizing-height-of-video-container%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
html:
<div class="indexVideoText">
sometext
</div>
<div class="videoContainer">
<iframe title="hQ6TSIFM8I0" width="80%" height="80%" frameBorder="0" src="https://www.youtube-nocookie.com/embed/hQ6TSIFM8I0?autoplay=1&loop=1&playlist=hQ6TSIFM8I0&origin=bellroy.com&modestbranding=1&showinfo=0&rel=0&version=3&mute=1"></iframe>
</div>
CSS
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
height:500px;
overflow:hidden;
border:1px solid black;
background-color:red;
padding-top:20px;
padding-bottom:20px;
}
iframe{
position:absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
}
answered Jan 19 at 18:10
Thanveer ShahThanveer Shah
37910
hi thanks for the answer.When i applied that yes container is small but video inside youtube video frame is also small...prntscr.com/m9dzol
– peonylast
Jan 19 at 18:49
Oh that is because i did not give a bigger value to the height just change height:200 to height:500px
– Thanveer Shah
Jan 19 at 18:52
thank you again.one last question is what about puting some extra space on and below container ? prntscr.com/m9e3xm
– peonylast
Jan 19 at 18:59
Yes mam, You just need to go the iframe tag and decrease the height and width to 80% , because right now it is 100% once you change it to 80% then you cN add more padding or margin for more space , I have editied the answer
– Thanveer Shah
Jan 19 at 19:10
actually i meant expanding the videoContainer prntscr.com/m9eaxc
– peonylast
Jan 19 at 19:13
|
show 5 more comments
0
html:
<div class="indexVideoText">
sometext
</div>
<div class="videoContainer">
<iframe title="hQ6TSIFM8I0" width="80%" height="80%" frameBorder="0" src="https://www.youtube-nocookie.com/embed/hQ6TSIFM8I0?autoplay=1&loop=1&playlist=hQ6TSIFM8I0&origin=bellroy.com&modestbranding=1&showinfo=0&rel=0&version=3&mute=1"></iframe>
</div>
CSS
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
height:500px;
overflow:hidden;
border:1px solid black;
background-color:red;
padding-top:20px;
padding-bottom:20px;
}
iframe{
position:absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
}
answered Jan 19 at 18:10
Thanveer ShahThanveer Shah
37910
hi thanks for the answer.When i applied that yes container is small but video inside youtube video frame is also small...prntscr.com/m9dzol
– peonylast
Jan 19 at 18:49
Oh that is because i did not give a bigger value to the height just change height:200 to height:500px
– Thanveer Shah
Jan 19 at 18:52
thank you again.one last question is what about puting some extra space on and below container ? prntscr.com/m9e3xm
– peonylast
Jan 19 at 18:59
Yes mam, You just need to go the iframe tag and decrease the height and width to 80% , because right now it is 100% once you change it to 80% then you cN add more padding or margin for more space , I have editied the answer
– Thanveer Shah
Jan 19 at 19:10
actually i meant expanding the videoContainer prntscr.com/m9eaxc
– peonylast
Jan 19 at 19:13
|
show 5 more comments
0
0
0
html:
<div class="indexVideoText">
sometext
</div>
<div class="videoContainer">
<iframe title="hQ6TSIFM8I0" width="80%" height="80%" frameBorder="0" src="https://www.youtube-nocookie.com/embed/hQ6TSIFM8I0?autoplay=1&loop=1&playlist=hQ6TSIFM8I0&origin=bellroy.com&modestbranding=1&showinfo=0&rel=0&version=3&mute=1"></iframe>
</div>
CSS
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
height:500px;
overflow:hidden;
border:1px solid black;
background-color:red;
padding-top:20px;
padding-bottom:20px;
}
iframe{
position:absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
}
answered Jan 19 at 18:10
Thanveer ShahThanveer Shah
37910
html:
<div class="indexVideoText">
sometext
</div>
<div class="videoContainer">
<iframe title="hQ6TSIFM8I0" width="80%" height="80%" frameBorder="0" src="https://www.youtube-nocookie.com/embed/hQ6TSIFM8I0?autoplay=1&loop=1&playlist=hQ6TSIFM8I0&origin=bellroy.com&modestbranding=1&showinfo=0&rel=0&version=3&mute=1"></iframe>
</div>
CSS
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
height:500px;
overflow:hidden;
border:1px solid black;
background-color:red;
padding-top:20px;
padding-bottom:20px;
}
iframe{
position:absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
}
answered Jan 19 at 18:10
Thanveer ShahThanveer Shah
37910
edited Jan 19 at 19:39
answered Jan 19 at 18:10
Thanveer ShahThanveer Shah
37910
answered Jan 19 at 18:10
Thanveer ShahThanveer Shah
37910
answered Jan 19 at 18:10
Thanveer ShahThanveer Shah
37910
37910
hi thanks for the answer.When i applied that yes container is small but video inside youtube video frame is also small...prntscr.com/m9dzol
– peonylast
Jan 19 at 18:49
Oh that is because i did not give a bigger value to the height just change height:200 to height:500px
– Thanveer Shah
Jan 19 at 18:52
thank you again.one last question is what about puting some extra space on and below container ? prntscr.com/m9e3xm
– peonylast
Jan 19 at 18:59
Yes mam, You just need to go the iframe tag and decrease the height and width to 80% , because right now it is 100% once you change it to 80% then you cN add more padding or margin for more space , I have editied the answer
– Thanveer Shah
Jan 19 at 19:10
actually i meant expanding the videoContainer prntscr.com/m9eaxc
– peonylast
Jan 19 at 19:13
|
show 5 more comments
hi thanks for the answer.When i applied that yes container is small but video inside youtube video frame is also small...prntscr.com/m9dzol
– peonylast
Jan 19 at 18:49
Oh that is because i did not give a bigger value to the height just change height:200 to height:500px
– Thanveer Shah
Jan 19 at 18:52
thank you again.one last question is what about puting some extra space on and below container ? prntscr.com/m9e3xm
– peonylast
Jan 19 at 18:59
Yes mam, You just need to go the iframe tag and decrease the height and width to 80% , because right now it is 100% once you change it to 80% then you cN add more padding or margin for more space , I have editied the answer
– Thanveer Shah
Jan 19 at 19:10
actually i meant expanding the videoContainer prntscr.com/m9eaxc
– peonylast
Jan 19 at 19:13
hi thanks for the answer.When i applied that yes container is small but video inside youtube video frame is also small...prntscr.com/m9dzol
– peonylast
Jan 19 at 18:49
hi thanks for the answer.When i applied that yes container is small but video inside youtube video frame is also small...prntscr.com/m9dzol
– peonylast
Jan 19 at 18:49
Oh that is because i did not give a bigger value to the height just change height:200 to height:500px
– Thanveer Shah
Jan 19 at 18:52
Oh that is because i did not give a bigger value to the height just change height:200 to height:500px
– Thanveer Shah
Jan 19 at 18:52
thank you again.one last question is what about puting some extra space on and below container ? prntscr.com/m9e3xm
– peonylast
Jan 19 at 18:59
thank you again.one last question is what about puting some extra space on and below container ? prntscr.com/m9e3xm
– peonylast
Jan 19 at 18:59
Yes mam, You just need to go the iframe tag and decrease the height and width to 80% , because right now it is 100% once you change it to 80% then you cN add more padding or margin for more space , I have editied the answer
– Thanveer Shah
Jan 19 at 19:10
Yes mam, You just need to go the iframe tag and decrease the height and width to 80% , because right now it is 100% once you change it to 80% then you cN add more padding or margin for more space , I have editied the answer
– Thanveer Shah
Jan 19 at 19:10
actually i meant expanding the videoContainer prntscr.com/m9eaxc
– peonylast
Jan 19 at 19:13
actually i meant expanding the videoContainer prntscr.com/m9eaxc
– peonylast
Jan 19 at 19:13
|
show 5 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54262928%2fcss-sizing-height-of-video-container%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
