Sorry for bad English, English is a second language
I have download a HTML template from
https://html5up.net/fractal
Now I am trying to change background with video playing
<body class="is-preload">
<!-- Header -->
<header id="header">
<video autoplay loop muted plays-inline>
<source src="/assets/css/videos/karing1080.mp4">
</video>
<div class="content">
<h1>Widget</h1>
<p>helper</p>
<ul class="actions">
<li>Download/p></li>
<li>More</li>
</ul>
</div>
</header>
This is css for video
video{
opacity: .3;
position: absolute;
min-width: 100%;
min-height: 100%;
height:auto;
width: auto;
top:0;
margin: 0;
overflow: hidden;
}
The problem is overflow does not work and horizontal scroll enabled.
I can tell that parent div is causing error but I do not know what and how to fix it.
I have spent so many hours on fixing it, plz let me know if you need more information for it
First of all overflow: hidden is an attribute that you apply on a container to hide the overflowing children, you can't just apply it on a children to contain it inside a parent, that's the opposite.
But there's better solution, we don't really need to use overflow: hidden;.
Here's CSS that will put your video in the back:
#header {
position: relative;
}
#header video {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
object-fit: cover;
}
object-fit: cover stretches keeping the aspect ratio the entire video to fill given space, which is 100% width and height parent container (#header).
Also make sure parent of the video has position: relative - in your code it would be #header, like in the code above, otherwise you might be setting the container in relation to unwanted element.
That's all :)
In order to have position: absolute working, the parent container needs a styling with position: relative. Try that and maybe give the parent container header also overflow: hidden.
Related
I'm quite new to coding and tried creating a website with what I know to use as my future portfolio. However, my content overlaps my header when I resize my browser, I am hoping for smooth or at least something that doesn't overlap without using tons of media queries.
My header is a 1920x1080 video that is set to width 100%, object-fit: cover and position: absolute. It has header text on top of the header video. My whole page has a full-screen scroll, so my header video and text is wrapped in a div that is set to 100vh.
How do I stop my content from overlapping the header? I am hoping for something that resizes along with the header video, creating a block that the content can't go over, but anything that helps me otherwise would be great.
I tried adding a div but then the div would make the content go too far below sometimes.
I also tried using a 1920x1080 picture that has the same properties as my header video except the absolute positioning that I tried placing above my header but below my header text, but then the picture doesn't resize the same as the video and instead just takes the up the whole 1080px vertically.
I tried using media queries which worked, but I hope there is something else I can do other than using media queries.
Here is the code:
#header-video {
width: 100%;
object-fit: cover;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
overflow-x: hidden;
}
.header-text {
position: relative;
top: 175px;
left: 100px;
color: white;
}
.red-block {
opacity: 1;
width: 100%;
margin-top: -310px;
object-fit: cover;
overflow-x: hidden;
}
<div class="header-text">
<div class="h1-text">HEADER</div>
<div class="h2-text">TEXT</div>
</div>
<div class="red-block">
<img src="resources\red block.webp">
</div>
<header>
<video id="header-video" autoplay loop muted>
<source src="resources\header.webm" type="video/webm">
</video>
</header>
</div>
I have two boxes next to each other in a flex container. One contains an iframe, the other a form. I want the iframe box to match the height of the form box, and have the iframe box keep an aspect ratio of 16:9.
I could not get the old padding-bottom: 56.25% trick to work, because that's based on width, which is tricky with Flexbox.
Here's a fiddle with an approximation of my HTML and (S)CSS, if you want to have a stab at this problem. https://jsfiddle.net/7zgh88ew/
If anyone has any ideas, they would be greatly appreciated!
By using inline-flex and a dummy img having the correct ratio, set it to visibility: hidden and then position the iframe absolute, it works, only in Chrome though, so there must be some issue, as with the other browsers, the img doesn't size its parent properly.
I will post a question myself to see if someone knows anything about that, and update this post when I know more.
Update
For a fixed height, i.e 200px, one can set it on the .container and add height: 100% to the .iframe and it will work for the other browsers (solution provided by Tunçel Mert)
Still, if the size of the form-content is based on its content, it still only appears to work on Chrome.
Fiddle demo
Stack snippet
.container {
display: inline-flex;
height: 200px;
}
.iframe {
position: relative;
height:100%;
background: red;
}
.iframe img {
height:100%;
visibility: hidden;
}
.iframe iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.form {
background: orange;
}
.fake-form-content {
width: 200px;
}
<div class="container">
<div class="iframe">
<img src="http://placehold.it/160x90">
<!-- Sorry about the video -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" width="320" height="180"></iframe>
</div>
<div class="form">
<div class="fake-form-content">
Fake form content
</div>
</div>
</div>
I've just spent 3 or 4 hours trying to understand how to get a "symmetric" DIV inside an HTML page that has to be not scrollable.
The DIV must have the same margins from the window on all sides and must contain an IMG whose size should scale according to the window size maintaining it's ratio.
At the following link you can find the best I've been able to do.
As you can see the DIV has the right margins on the left, top and right size but not on the bottom one! Why not?
Is there something wrong with the DIV style?
<div style="margin: 50px;">
I hope it's quite clear, thank you for your help! :)
Edit: since on JSFiddle it doesn't appear as it should be I've just uploaded an image about what I get on my browser:
Edit 2: this is the link to the last working solution, thank you all for your help, in particular to dcardoso. :)
You should add to your body and html tags (doesn't work in jsfiddle) and remove 'overflow: hidden':
position: relative;
height: 100%;
and to your div tag (remove 'margin:50px'):
box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;
The page is getting cut because you are using overflow: hidden; for html and body .
when adding style tag inside jsfiddle style, it is not working. so scroll is visible.
Ahhh, I think I get what you're saying. If the page is longer than your div the space on the bottom is greater than the 50px margin.
You have a couple of choices here, this is just one of many.
I'm using calc() to calculate the 100% width/height minus the 50px on each side.
html, body {
margin: 0px;
overflow: hidden;
}
.maxSizeElement {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
margin: 50px;
}
/* OR YOUR COULD USE... */
.maxSizeElement {
position: absolute;
width: 85vw;
height: 85vh;
top: 0;
right: 0;
left: 0;
bottom:0;
margin:auto;
}
<body>
<div>
<img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
</div>
</body>
I am having a client's Html Site Project, Where I used a video in the background of site's homepage, I used a absolute div outside of video with 100% height and width, My Client don't want a scrollbar on y-axis & I also cant use overflow:hidden; property of CSS, may be Client will adds some content in future, I am still confused if i have given 100% height and width to parent element of video then from where the scrollbar is coming when I use bottom:0 poperty with that div then scrollbar won't show but the size of video would be changed, why its happening please help me. Thanks in advance & and forgive me if I could not clear the exact problem which I am getting.
Site URL: http://trekoholic.com/site/
I used body { overflow-y: hidden; } as a temporary basis
CSS and HTML:
div#video-player {
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
<div id="video-player">
<video width="100%" height="100%" loop="" autoplay="">
<source type="video/webm" src="Video/eat.webm"></source>
</video>
</div>
you have to change
div#video-player {
position: absolute;
}
by
div#video-player {
position: fixed;
}
it works but has a counter, if the video has the largest height to the height of the bottom of the screen will not see, but if I understood correctly, this is desired, even in the future will allow you to add more content and will be seen without problems
if you want the full video display just add height: 100% to div#video-player
div#video-player {
position: fixed;
height: 100%;
}
the counter, if the video has different proportions than the screen may not fill the entire width
so I really hope this helps
I am trying to make my website responsive, and I have a PDF viewer in object tags in the body simply like this:
<object width="950" height="800" data="images/ah.pdf"></object>
Since the width and height are defined, I changed it to:
<div id="custom">
<object data="images/ah.pdf"></object>
</div>
and then adjusted the div in the css portion using percentages. My problem is that the whole PDF viewer does not show, and instead is a small box that has scroll bars on the sides, so you have to scroll left right and top bottom. Is there any way I can get it to adjust the PDF size according to the window size instead of just adjusting the PDF viewer alone? I hope this makes sense as clear as possible. Thank you!
Change your object tag to this:
<object data="images/ah.pdf" style="width: 100%; height: 100%; display: block;"></object>
You can add the style to a class, then include the class in your object tag. Or use another variation to get the styles applied. The width and height will be the same size as its parent container.
#Adam answer may work. I honestly don't deal with much/ BUt I will tell you that I have setup iframes for displays and they are responsive-compatible
This is what I'd do
<div class="content">
<div class="embed-container">
<iframe src="/images/myPDF.pdf" frameborder="0"></iframe>
</div>
</div>
.content {
width: 50%;
margin: 0px auto;
}
.embed-container {
height: 0;
width: 100%;
padding-bottom: 56.25%; /* play with this until right */
overflow: hidden;
position: relative;
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}