The code is simple enough, it's basically an iframe: (this code is right after the <body> tag.
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/MYVIDEOID?autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1"></iframe>
</div>
The only problem I'm getting is that my monitor is wide and when maximized, the edges on the side of the browser are black, (meaning the video only stretches so much). It will only satisfy the window size to 100% of either the height or the width.
To put in other words, if re-sized to "phone/tablet" vertical position, the video will be at 100% in width (still in 16:9 ratio), but everything above the top border and below bottom border will be black/blank space.
How would I make it so the video is always covering 100% of the background? (if width is way more than height for the 16:9 aspect ratio, it's still scaled appropriately just missing the top/bottom part of the video in "see-able" view. likewise.. if in mobile mode, the height of video is 100% of device/browser, video is still 16:9, but sides of video aren't see-able)
I have found this resource to accomplish exactly what I needed to have done: https://vegas.jaysalvat.com/
Works best with own MP4 (or similar) uploaded resource.
Related
I am trying to embed a vimeo iframe with 100% width.
If I try like that it is not getting the full width:
<iframe title="vimeo-player" src=" <?php echo $src; ?>" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen></iframe>
If I use suggested answers in similar questions then the iframe is dissapeared:
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
Here is the link https://kappagram.tk/work/bookoo/ with fixed height but its not what I want because in smaller screens there is a blank space...
The div with the id #gallery and it's parent section both have small padding on the sides (left & right). By removing those paddings (I've used the Google Dev Tools to test it), the width cover the whole width,
Width 100% means 100% of it's parents width, but also with it's margin and padding.
I would suggest giving the width a relative length unit such as 'vw'. You can read more about relative length unit in CSS over here: W3Schools documents on CSS Units
I have an img element that looks like:
<img src="header-900x600.jpg" class="header-image" alt="" width="900" height="600" style="background-color: rgb(4, 96, 247);">
With the css:
.header-image {
display: block;
max-width: 100%;
max-height: 400px;
width: auto;
height: auto;
}
Now this is meant to force the image to resize to be max-height: 400px, or max-width: 100% whilst keeping its aspect ratio. Although when loading the image collapses into:
And after the image loaded, it pushes the text down:
I thought that since the image has the width and height inline, the browser would know it's aspect ratio already, and the image wouldn't be jumping around? Is there something I am missing?
All I want is the image element, before the image source has loaded, to be in the same aspect ratio as the image will be. Making the layout not jump around!
All major browsers are now capable of doing exactly this in their current versions.
When you specify width and height attributes in HTML on the img tag and in CSS you set a width (percentage or fixed, also max-width is valid) and height to auto (or vice versa) the browser calculates the correct size and aspect ratio out of it, until the image is loaded. When the image is loaded, it uses the dimensions of the loaded image, so these should not differ from the attributes you set, otherwise you will get a layout shift again.
Note, however, that an invalid image or an image that cannot be loaded might be treated differently than a not yet loaded image. It is not guaranteed that width and height attributes of the img are considered. (This is especially important if you want to test the behavior, you cannot simply remove the value of the src attribute, this won't get you the same result as a not yet loaded image.)
Also note that there are still issues with responsive images (picture element and srcset attribute of img element) as described in the follwing link.
A great article with more detailed info and browser support can be found here: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
Note: Simply providing width and height to your images can result in a way better result in the new Lighthouse CLS (Cumulative Layout Shift) measurement, see https://web.dev/cls/
The browser doesn't know anything about the image until it is loaded. You can't set parameters of an element that doesn't exist. Instead, simply add the image into a container with full width, like so:
<div class="container">
<img src="header-900x600.jpg" class="header-image">
</div>
.container {
display: block;
width: 100%;
}
.header-image {
display: block;
max-width: 100%;
max-height: 400px;
}
Also what Tarik says in his answer is correct, if you are declaring auto height and width then max-height and max-width are doing nothing.
You set the width and height to auto. This means that the size will be set to the currently loaded image rather than anything to do with the max-height or max-width.
Note that this is probably a duplicate of CSS: Keep Aspect Ratio of an Element for Given Height
To be clear, when you set width and height to auto, you are overriding the other settings that you set and telling the browser to detect the size of the image. While the image is downloading, it cannot, so it behaves as you describe.
You could programmatically use javascript to set these properties after you detect that the image is done loading.
I am currently working on a website where I want on the top to be a slideshow/carousel like thing but with videos instead of pictures instead.
The video should have a width of the full page which is working fine but I can't happen to get it to to adjust the height.
The video is "to big" in height so I am trying to only show half of it.
I tried doing so by limiting the height of the parent div but the video keeps to "overlap" out of that div.
Add overflow: hidden to the div of the video. Therefore the div will hide any overflowing content of the div.
I believie you are looking for something like this. It would keep aspect ratio.
<div class="container">
<video></video>
</div>
.container {
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
Ref: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
Or as Mantas mentiones, do overflow: hidden, but that will crop video.
My site is supposed to have a fixed width layout (Not responsive) with the background expanding the full width of the browser.
However when I shrink the browser the background gets cut off when it should stay at 100% full width. The same thing happens on an iphone and ipad, part of the background is cut off.
Website here: www.knockedupnowwhat.com
Im thinking that my css is wrong somewhere?
Thanks
You need to setup min-width:1140px on all container elements that have width 100%. so for instance your footer should look like this
footer {
background: none repeat scroll 0 0 #474747;
min-width: 1140px;
width: 100%;}
In the future, posting some of your code would be useful.
However the problem is because your div.container is set to 100% and it is your wrapper div. So when you resize the browser it will only be 100% of the browser, never wider. It's cutting off the backgrounds of it's child divs.
I wish to have an image (img tag not background to a div) which stretches full width and stretches to the bottom of the page (without stretching to the top).
I have tried the solution described here: CSS Background to stretch to window bottom?
but I am only getting it to stretch 100% in relation to the page, and creating a scrollbar and going under the page. I tried various variations (with min-height instead of height and I either get the image back to just full width (without stretching height to the bottom) or it stretches beyond the screen.
I have prepared a small JSFiddle of what CSS and HTML I have so far, although the effect might not be so visible.
http://jsfiddle.net/Sk55Z/
What am I missing?
I would look into jQuery Backstretch to make it cross browser. You can also use conditional html statements to rely on background cover to maintain a correct aspect ratio.
.iebg {
position: fixed;
top: 0; /* here is where you specify how low you want the image to start */
left: 0;
width: 100%;
height: 100%;
}
Throw that class on an image tag.
And here is an example with just an image tag:
http://jsfiddle.net/Sk55Z/2/