I am wrapping a video with this code:
.row-full {
width: 100vw;
position: relative;
margin-left: -50vw;
height: 780px;
margin-top: 0px;
margin-bottom: 0px;
left: 50%;
}
I can use 100vw for the width but I need to use the exact height for displaying the video correctly. THe problem is that on mobile devices the width resizes but the height stays the same. Is there a way to resize the height without using #media screen?
The URL where you can see the problem is the following:
Link to example
You can try this:
height: auto;
or Remove this from your code:
height: 780px;
Related
body {
height: 4000px;
}
.container-fluid {
z-index: 10011;
background: rgba(0,0,0,.5);
position: fixed;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
align-items: center;
justify-content: center;
}
.video-wrap {
z-index: 10012;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
max-width: 800px;
margin: 0 auto;
}
.video-wrap iframe {
z-index: 10013;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 1080px;
}
https://codepen.io/codepen_user_123/pen/JjRoPNW
I am trying to figure out how to hide the black background in the iframe. The problem is because of cross-domain requests, I cannot make any changes to the background to make it transparent, so I need to hide the black background using css, but I can't find a solution for it. I have tried various things on Google, but they only work on YouTube videos and not aws videos or any non video hosting websites with their own video players (not using vanilla html5 video players).
The black background is because the iframe's size is not the same as the natural video size. we can remove the background by defining a height and width of the iframe like so:
See width changed to 226px
<iframe width="226" height="315" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/cat.mp4" frameborder="0" allowfullscreen></iframe>
Or the responsive version explained below:
What I did was find the aspect ratio of the Video specified in the iframe by just playing with the width and height until only the image of the cat was showing with no black bars surrounding it.
That gave me the width 226px and height 315px of the element which I need to create the aspect ratio for the parent element.
Using the same logic shown here, I made the wrapping container of the iframe have a
padding-top: calc((315 / 226) * 100%);
Then I added another container around this wrapping container and defined it's width property there. Based on the width of this main-wrapping container, the inner wrapping container height will grow/shrink responsively.
Then I float the iframe over it with positon: absolute and height: 100%; width: 100%;
That should be a good place for you to start. hope this helps.
Please see Codepen here:
https://codepen.io/Zlerp/pen/dypPybj
Im using css to resize an iframe in order to maintain the aspect ratio of the iframe (as described here : Responsive video iframes (keeping aspect ratio), with only css?).
.iframe-wrapper {
position:relative;
width:100%;
height: 0;
padding-bottom:58%;
}
.iframe-wrapper iframe {
position:absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
}
However, the problem i am facing is that for very wide screens this causes the iframe height to be large and the user has to scroll to view the content, which i want to avoid. So i am looking for a way to set a maximum value for.iframe-wrapper padding-bottom based on the viewport size. Something like this but for the bottom-padding:
max-height: calc(100vh - 200px);
Is there a way to do this?
Thanks :-)
If you want to maintain the same ratio then you could add a max-width of the screen height / your ratio (as the padding-bottom is dependant on the width) to a container div:
.container {
margin: 0 auto;
max-width: 178vh;// 100 / 56
}
.framewrapper {
background: pink;
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
}
.framewrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
<div class="container">
<div class="framewrapper">
<iframe src="http://blar.com" width="20" height="10" scrolling="no"></iframe>
</div>
</div>
If not you would have to add a media query and fix the padding to 100vh, but then the ratio won't stay the same.
As elements with the padding-bottom trick are unaffected by the max-height property, the most efficient way to do this is to create a media query that switches the element to a different aspect ratio depending on your current browser width, like so:
.iframe-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 58%;
}
.iframe-wrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
#media (min-width: 1200px) {
.iframe-wrapper {
padding-bottom: 40%;
}
}
Recently I came across an situation of such issue of padding by % or max-padding. I found a very useful hackish way ... using of transparent image.
How it works? Foremost, I must say to use this method u need to set/definite max width/height which the container will go.
Example: You have 800x600 container + left/right padding of 50px(max)
Create 50x600 transparent image(s) ... duplicate if u need for both side.
Float your contend + padding(s) accordingly
Set padding(s) to 100% height
You now have responsive padding that scale with your main container
I am trying to get a YouTube video to display at 100% width and height. It seems the iframe itself is doing what I want, however, once the video plays it is only 100% width up to 1100px.
I have tried searching the web but cannot find a solution to get the video itself to be the same width as the video poster and iframe width.
Try this:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<iframe src="https://www.youtube.com/embed/ZLyS2wHiZM8"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
Reference article
I assume your video ratio is 16:9. Maybe you can try this:
.container {
width: 100vw;
height: 56.25vw;
}
.video {
width: 100%;
height: 100%;
}
This is an example link
Your video has already a 100% width. When I make a right-click on the left or right side of the video, the context menu of the youtube video appears. Check this screenshot
I think the problem is about your video. Your video don't have the right width and height to appear correctly.
http://jsfiddle.net/leongaban/6rd2hhpq/8/
I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.
I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.
This allows the user to keep scrolling past the browser window so you lose sight of the scroller.
Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.
.red-box {
position: fixed;
width: 100%;
height: 40px;
color: white;
background: red;
}
.sidebar {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 20px;
width: 180px;
height: 100%;
}
If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :
.not-stuck {
height: calc(100% - 60px);
}
Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).
I changed the height to 90% and it seemed to work:
.not-stuck {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 200px;
width: 180px;
height: 90%;
}
I will like to get help please with building a responsive design.
The thing is that I don't know how to position elements as absolute but keep the same distance from top proportions between them.
Here's a link to an example where you can resize the window width and see that the two elements are moving away from each other instead of always keep the same space between them from top.
So what I'm looking for is to kind of faking scaling of the whole thing so it will only get smaller/larger but look always the same.
How can I make the elements to go up and shrink the space from top when window resize please?
http://jsfiddle.net/QV6DR/
.container {
width: 100%;
height: 1000px;
position: relative;
background: #eee;
}
.container div {
height: 0;
position: absolute;
background: #ccc;
}
.elm1 {
width: 20%;
padding-bottom: 20%;
top: 20%;
left: 5%;
}
.elm2 {
width: 30%;
padding-bottom: 30%;
top: 40%;
right: 10%;
}
Because your container has a height of 1000px and your elements are positioned 20% relative to the top of the container(which is always 200px), they wouldn't be able to shift up when the browser window is resized.
If you change the container styles to the following:
.container {
width: 100%;
height: 100%;
position: absolute;
background: #eee;
}
The elements will shift up when your browser window is resized vertically.
I believe the only way to shift them up vertically without resizing the window vertically, would be by using media queries and modifying the top: 40%; styles on your elements.
Here's the fiddle without media queries.