I'm looking for a HTML & CSS way to display this embed video as a 75vh height hero background.
For now, the iFrame keep his width: 100% and his height: 75vh but the images in itselves aren't covering the whole header width.
Actually, I need it to behave like a background-size: cover property.
Here is a quick attached jsfiddle to illustrate this issue, best way to see it is in a new tab.
https://jsfiddle.net/wollsale/9yrvLy72/
PS : I know there is a loads of articles talking about that kind of problem, but I didn't found a solution that works for me.
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
header {
background: #ddd;
height: 75vh;
width: 100%;
}
.video__wrapper {
position: relative; padding-bottom: 53.25%; /* 16:9 */ padding-top: 25px;
}
.video__inner {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
min-height: 100%;
}
<body>
<header>
<iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&loop=0&rel=0&showinfo=0&controls=0&autohide=1" frameborder="0" class="video__inner"></iframe>
</header>
<main></main>
</body>
EDIT
This article explain how to use HTML & CSS only to kind of "crop" a video in order to make it covering to whole viewport.
https://fvsch.com/code/video-background/
See it in action with this great codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
This article explain how to use HTML & CSS only to kind of "crop" a video in order to make it covering to whole viewport.
https://fvsch.com/code/video-background/
See it in action with this great codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
Related
Ive been fiddling with a lot of informationm ive found here to overlay a transparent TV PNG over a youtube video, and have succesfully gotten it to work on desktop. However I cannot get it to align correctly when viewed on mobile devices (which will be primary viewership). Is there a way I can force different CSS values depending on the device used?
#panel {
position: relative;
width: auto;
height: 625px;
overflow: hidden;
}
#panel-tv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/tvoverlay.png') no-repeat center;
pointer-events: none;
z-index: 10;
}
#panel-content-overlay {
position: absolute;
top: 80px;
left: 24%;
width: 720px;
height: 405px;
z-index: 9;
background-color: #000;
}
#embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
<div id="panel">
<div id="panel-tv"></div>
<div id="panel-content-overlay">
<div id="panel-content">
<div id="embed-container">
<div style="width: 683px; " class="wp-video">
<iframe width="710" height="399" src="https://www.youtube.com/embed/ZI2dbyNn8PI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
It is live currently at http://nickosteel.com for your reference.
Regards
One problem I could see is that you have the tv image larger than it needs to be, meaning it becomes a bit harder. I would do the following changes.
Container (id="panel")
make this max-width to after your tv image and center it with
margin: 0 auto;
TV image
cut it so it had as much to the left as the right, so the panel width to the right, should be as much "transparent" to the left. That makes it much easier to align
use it as an image (<img />) instead of a background, that way it will become responsive and have it's natural height (and width).
set width width: 100%; (this is for the responsive part)
Video
make it responsive, look at this post for that (note you don't need any of the javascript, just html/css)
center it
with this you are good to go for a responsive solution. It would be a bit easier to give you the changes in css and html, but for that you need to have the tv image at the right size to begin with. Hope this makes sense!
Just an opinion of mine, use classes for styling and id for javascript targets.
I'm trying to make iFrame adaptive according to window size. I almost done but in phone mode it's breaking, no idea why. I used a lot of examples about how to align iFrame, but no one worked well. Also, a space what you can see on screenshot below doesn't appears in html or css, and it seems like this space is out of body or html, at all. Any ideas what could that be? I'm using asp.net core web application with razor pages. iFrame is inside div tag what's inside main tag
Here's my css code
.AdaptiveIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
}
.AdaptiveIframe {
position: relative;
padding-bottom: 100%;
height: 100%;
width: 100%;
}
html
<main role="main">
<div class="AdaptiveIframe">
<iframe frameborder="0">Oops! Your browser does not support iframe.</iframe>
</div>
#RenderBody()
</main>
I've suddenly found an answer. Here's my css code. But I'm welcome any suggestions if there's still anything to fix.
.AdaptiveIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 150%;
}
.AdaptiveIframe {
position: relative;
padding-bottom: 150%;
}
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
The vertical repetition of the background image in both sidebars on each side of the page stops where the computer screen ends, not where the page ends. As you can see, I have already tried to make all parents height: 100% in CSS, but it doesn't work. How do I make the image repeat itself till the bottom of the page?
HTML:
<body>
<div class="sidebar" id="sidebar1"></div>
<div id="content">
</div>
<div class="sidebar" id="sidebar2"></div>
</body>
CSS:
html, body {
min-height: 100%;
min-width: 100%;
}
#content {
min-height: 100%;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sidebar {
min-height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#sidebar1 {
background: url(image.png) repeat-y bottom left;
background-size: 125px 125px;
}
#sidebar2 {
background: url(image.png) repeat-y bottom right;
background-size: 125px 125px;
}
Here's a similar question with a very detailed answer which suggest to use a css3 feature called Viewport Percentage Length as in :
height:100vh;
Please refer to that answer which includes explanations on when this can be used and what browsers support it, to see if it can help to you. There are other answers worth a look to achieve the same kind of effect without setting the height.
you can solve it with javascript (jQuery). resize your sidebars after page loaded. for example:
$(document).ready(function(){
if($('#content').height()>$('#sidebar1').height()){
$('#sidebar1').height($('#content').height());
$('#sidebar2').height($('#content').height());
}
});
(I didn't try it, but I think it works.)
I have a div main that I have wrapped around my content and a sidebar. I have assigned the #main to have a background image and a min-height of 1200px.
In Google Chrome & Firefox, when I inspect the div doesn't have any properties when I inspect the source. Thus the div's background image and height don't work either.
<!--Main content layout -->
#main {
clear:both;
position: relative;
min-height: 1200px;
background-image:url(images/white.png);
background-repeat: repeat-x;
}
.sidebar1 {
float: right;
width: 20%;
padding-bottom: 10px;
margin-top: 20px;
}
.content {
padding: 10px 0;
width: 76%;
float: left;
margin-top: 20px;
}
The site address is: http://www.tibetskyvillage.org/
Would really appreciate someone elses eyes on this. I use this method all the time and for some reason this time it's failing.
The comment <!--Main content layout --> is not a valid CSS comment but an HTML comment instead causing a parse error.
See the screenshot, I have found some disturbances in your layout, to fix this or solution to your problem is
Don't give the image as background in CSS, give it as image in html like this
<img width="1360" height="675" src="images/bg0.jpg" class="wraper">
<div id="main">Your content</div>
Add styles to the image and main as
.wraper {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#main{
position: absolute;
min-height: 1200px;
width:100%;
}