I'm trying to embed a video using an iframe but I'm getting some annoying overflow padding that I can't seem to get rid of.
The code at the top is a way of forcing an iframe into a responsive style so that you can view it on mobile.
Basically the 'padding-bottom' code is controlling the aspect ratio of the frame.
I got the code from here:
https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
I've checked here: Making responsive iframe and this leaves me with horrible overflow too.
The result is below:
Image displaying overflow issue
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
Changing the padding-bottom: to 56.35% just moves the black overflow line to the bottom of the video instead of the side.
height 100vh will take 100% of viewport and margin:0 and padding:0 remove default properties.
Just add
.video-container {
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%; /* Add this */
height: 100vh; /* Add this */
padding:0px; /* Add this */
margin:0px; /* Add this */
}
.video-container {
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100vh;
padding:0px;
margin:0px;
}
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
I just did this instead. It works - gets around the user agent style sheet that Chrome uses and applies correct styling.
<style type="text/css">
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
border: 0;
overflow: hidden;
}
</style>
<div class="video-container">
<video style="width:100%;" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" controls autoplay type="video/mp4"></video>
</div>
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
Related
I've this iframe that not allow me to click on back of iframe,
how can resize or allow to click on back when tha part of iframe is closed.
My code is:
<div class="iframe-container">
<iframe loading="lazy" src="https://test-website.it/" allow="camera *;microphone *" ></iframe>
</div>
<style>
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: fixed
}
.iframe-container iframe {
border: 0;
right: 0;
position: fixed;
width: 10rem;
top: 25%;
min-width: 36vw;
min-height: 71vh;
}
</style>
example
I'm trying to embed a youtube video into my project, it works and I also tried to apply a 16:9 ratio with padding-bottom: 56.25% like as most tutorials out there.
The issue is, the height of video is happened to be 100% of the container, What should I fix in my CSS to get rid of the top/bottom blackbar?
Here's my code pen attemp: https://codepen.io/DieByMacro/pen/QXmJez
.HomePage-homeVideoWrapper-274 {
height: 0;
margin: auto;
z-index: 1;
position: relative;
max-width: 720px;
padding-top: 25px;
padding-bottom: 56.25%;
}
.HomePage-homeVideoWrapper-274 iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
<div class="HomePage-homeVideoWrapper-274">
<iframe height="auto" src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>
This is very common problem which we are facing while we add a videos on our template.You just need to add max-width and width property on OUTER div not at HomePage-homeVideoWrapper-274. No need to added max-height in HomePage-homeVideoWrapper-274.
.outer {
width: 100%;
max-width: 750px;
margin: 0 auto;
}
.HomePage-homeVideoWrapper-274 {
height: 0;
margin: auto;
z-index: 1;
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
display: block;
overflow: hidden;
iframe {
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
}
<div class="outer">
<div class="HomePage-homeVideoWrapper-274">
<iframe src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial"></iframe>
</div>
</div>
Demo
How do you make a youtube video full-screen width and height but make the video full size and it completely fills up the entire screen even when you resize but I don't want this to have the black bars at all when resizing.
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px; height: 0;
overflow: hidden;
z-index: 1;
}
.video-container .video {
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: fixed;
left: 0;
top:0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
right: 0;
bottom: 0;
}
HTML
<div class="video-container">
<div class="video">
<iframe width="853" height="480" src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Check it out on CodePen for viewport resizing to see the responsiveness. https://codepen.io/rickydam/pen/dzyEoR/left/
Refer to this similar question.
Responsive fullscreen youtube video with no black bars?
This article sums up embedding a responsive Youtube video using CSS.
https://avexdesigns.com/responsive-youtube-embed/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
I'm trying to make video container div responsive but couldn't manage it so far.
My current CSS for video and container:
.header-container{
width: 100% !important;
height: auto !important;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
video-container{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
.video{
position: absolute;
z-index: -1;
opacity: 0.78;
widows: 100%;
width: 100% !important;
height: auto !important;
margin:0 auto;
}
HTML:
<div class="header-container">
<div class="video-container">
<video preload ="true" autoplay loop = "loop" volume = "0" style="width: 100%;
height: auto;">
<source src = "webd.mp4" type = "video/mp4" >
</video>
</div>
</div>
Current look:
Current look
Could you please tell me how can I fix it? I'm still new in HTML and CSS and I really need your help & advice.
https://jsfiddle.net/mlegg10/fsftz8rt
/* 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="<source src = "webd.mp4" type = "video/mp4" >" frameborder="0" style="border:0"></iframe>
</div>
a large deal of your code does not associate itself between html and css so it would be helpful to you to understand how it works. Firstly, video is not styled due to it being referenced as .video in your css and your video container has the opposite with the reference being video-container with no dot so your css should look like this
.header-container {
width: 100% !important;
height: auto !important;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
opacity: 0.78;
widows: 100%;
width: 100% !important;
height: auto !important;
margin: 0 auto;
}
To make a view response you need to scale with its parent and to have most things with % to do this you need to add
position: relative;
to all the parents
After this you need to remove the position absolute as it will mess up your styling by making it an object that does not scale properly
Here is an example of what I think you mean:
https://jsfiddle.net/afut7y99/
Change the sliders at the sides to see how it resizes.
I'm trying to embed a chat along with my twitch stream on a Xenforo (forum software) page. I want the stream to be 16:9 so it's HD, and I want it to adjust based on the user's resolution. Here's what I have so far to do that
<style>
.twitch {I
position: left;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 30px;
overflow: hidden;
}
.twitch iframe {
position: absolute;
top: 0;
left: 0;
}
.chat {
position: right;
padding-bottom: 56.25%;
padding-top: 30px;
overflow: hidden;
}
.chat iframe {
position: absolute;
top: 0;
right: 0;
}
.twitchWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.twitchWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 70%;
}
.chatWrapper {
position: top;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 50px;
height: 0;
}
.chatWrapper iframe {
position: top;
top: 25;
right: 8;
width: 29.5%;
height: 35%;
}
</style>
<div class="twitchWrapper">
<div class="twitch">
<iframe frameborder="0" scrolling="no" src="http://www.twitch.tv/Sykikal/embed"></iframe>
</div>
</div>
<div class="chatWrapper">
<div class="chat">
<iframe frameborder="0" scrolling="no" src="http://www.videogameinfo.net/forums/chat/popup"></iframe>
</div>
</div>
There's just two problems.. The chat appears too high up, it isn't aligned with the streaming page. http://videogameinfo.net/forums/pages/stream/
The other problem is that there's too much empty space down at the bottom. I tried changing the chat wrapper to adjust the position, but even changing it to a 1 or something throws it way off and moves it too far down to the bottom. Hoping someone can help.
You have issue because you have not proper HTML structure.
The below space is because you give lots of padding to chatwrapper class and chat class.
Just remove padding-bottom: 56.25%; from both class will remove your extra space.
And another issue: The chat appears too high up because you give iframe position:absolute; and it's top is 0. Change it to more approximately 300px;. like:
.chat iframe {
position: absolute;
right: 0;
top: 300px;
}
Hope it helps.