Trying to make a video as the background to a websites home page. Noticed that in my local environment (windows) the video always appears no problem, but when testing the local environment on BrowserStack, on any and all IOS devices the blank white background appears, while android and windows are fine.
This is how my video tag is formatted:
.categoryBtns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
/* grid-template-columns: repeat(4, minmax(175px, 1fr)); */
grid-column-gap: 2rem;
margin: 10% auto auto auto;
justify-content: center;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background-color: white;
}
.circle-button {
position: relative;
z-index: 10;
border-radius: 100%;
background: #ffffffc2;
color: #50a249;
font-weight: 700;
text-transform: uppercase;
font-family: 'Quicksand';
font-size: 22px;
border: none;
box-shadow: 0 0 20px #cacaca,
inset 0 0 20px #9b9b9b;
text-align: center;
height: 190px;
width: 190px!important;
display: flex;
justify-content: center;
align-items: center;
place-self: center;
}
.circle-button:hover, .circle-button:active, .circle-button:focus {
color: #143156;
font-size: 24px;
border: 5px solid #8de086;
box-shadow: 0 0 50px #50a249,
inset 0 0 100px #50a249;
background: rgba(255, 255, 255, 0.849);
}
.circle-button img {
position: absolute;
top: 0;
left: 0;
opacity: 60%;
padding: 2rem;
z-index: -1;
}
<section class="homepage-background">
<video src="https://store-cmzuk2x1pt.mybigcommerce.com/content/background%20video%20ingredi.mp4" autoplay loop muted playsinline="true" disablePictureInPicture="true" type="video/mp4"></video>
<div class="categoryBtns">
<img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/bakery-white-175x175.png" />Bakery
<img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/beverage-white-175x175.png" />Beverage
<img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/wine-white-175x175.png" />Wine
<img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/beer-white-175x175.png" />Brewery
<img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/flavorsfragrances-white-175x175.png" />Fragrances <br>& Flavors
</div>
</section>
is it an issue with the format of my video? am i missing something in my tag?
i have not added all the code i am working with on this specific page, only the pertinent info so apologies if there is css listed for classes not shown, etc.
Have you tried to convert your MP4 file with other codecs?
iPhone can only recognize the file with .mp4 extension compressed in H.264, MPEG, or HEVC (iPhone 7/7 Plus or later)
Maybe this article could help:
https://www.winxdvd.com/play-video/play-mp4-iphone.htm
Related
I am trying to use a Video as a Background in a loop and muted. The Problem is, that i want to have a heading and subheading centered over the video. Although when using something like position: absolute on the video it breaks the complete responsiveness of the page.
I tried putting absolute position on the video, which does work if it shouldnt be responsive. Also tried something with relative position, although then the text is at the right side of the video (because its the second flex item in the row). How is the correct approach to center text over a background video? For images i tend to use the background-image tag, which according to my research, does not work for videos.
<div className='homeImage'>
<video loop autoPlay muted>
<source src={video} type="video/mp4"/>
</video>
<div className='home-content'>
<h1 className='mb-4'>My Name</h1>
<h2>This is a blog</h2>
</div>
</div>
.homeImage{
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.home-content{
height: 100vh;
width: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home-content h1{
font-size: 90px !important;
color: #fff !important;
z-index: 10;
}
.home-content h2{
font-size: 40px !important;
color: #fff !important;
z-index: 10;
}
.homeImage img,video{
opacity: 0.5;
height: 100vh;
z-index: 0;
width: 100%;
object-fit: cover;
position: absolute;
}
#media (max-width: 767px){
.home-content h1{
font-size: 60px !important;
}
.home-content h2{
font-size: 35px !important;
}
}
#media (max-width: 497px){
.home-content h1{
font-size: 30px !important;
}
.home-content h2{
font-size: 20px !important;
}
}
This is how it looks after modifying the CSS:
So its sadly still not responsive
To position text over a video (or img for that matter). You can wrap the text and video in a div (which you've already done). Make the div position: relative; and position the text with position: absolute;. This way the content stays in the flow of the page, while allowing you to position the text however you want!
.homeImage{
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/* added code */
position: relative;
}
.home-content{
height: 100vh;
width: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* added code */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.home-content h1{
font-size: 90px !important;
color: #fff !important;
z-index: 10;
}
.home-content h2{
font-size: 40px !important;
color: #fff !important;
z-index: 10;
}
.homeImage img,video{
opacity: 0.5;
height: 100vh;
z-index: 0;
width: 100%;
object-fit: cover;
/* remove position: absolute; from here*/
}
#media (max-width: 767px){
.home-content h1{
font-size: 60px !important;
}
.home-content h2{
font-size: 35px !important;
}
}
#media (max-width: 497px){
.home-content h1{
font-size: 30px !important;
}
.home-content h2{
font-size: 20px !important;
}
}
<div className='homeImage'>
<video loop autoPlay muted>
<source src={video} type="video/mp4"/>
</video>
<div className='home-content'>
<h1 className='mb-4'>My Name</h1>
<h2>This is a blog</h2>
</div>
</div>
I have developed a stock tracking app for my customers. This app also can generate barcode. I would like to allow print barcodes in printer, but I cannot do it properly. In a page, there have to be 72 barcodes that are ordered by CSS display:flex. Everything ok in my screen. But in print screen there is something wrong. I need help about this topic. I have done some triements as remove flex codes or decrease column about by decrease barcode numbers, it is ok again in printing.
CSS codes:
body {
background: rgb(204, 204, 204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
.tablo {
position: absolute;
margin-top: 1.05cm;
margin-left: 0cm;
display: flex;
flex-wrap: wrap;
}
.hucre {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 1px solid black;
width: 35mm;
height: 23mm;
padding-left: 0.11cm;
padding-right: 0.11cm;
padding-top: 0.065cm
}
.firm {
text-align: center;
line-height: 0.7;
font-size: 0.7rem;
font-weight: 600;
}
.barkod {
text-align: center;
line-height: 0.7;
font-size: 0.7rem;
}
svg {
height: 16mm;
}
#media print {
body,
page {
margin: 0;
box-shadow: 0;
}
}
HTML codes:
<page size="A4">
<div style="position:absolute; margin-top:3mm; margin-left:3mm">
<div class="d-flex">
<div class="hoverEffect me-2" onclick="history.back()"><i class="bi bi-arrow-left-circle"></i> GERİ
</div>
<div class="hoverEffect" onclick="window.print()"><i class="bi bi-printer"></i> YAZDIR</div>
</div>
</div>
<div class="tablo" id="tablo">
</div>
</page>
Problem visuals:
Everything is ok in website
Right and bottom (not shown) gaps appear
Try to solve my problem
actually, error not in your html or css code.
you have to choose right print option.
i think you want to take a pdf print or something like that.
so you must go to your print ( page / scale ) option.
you can look this images for advanced print settings.
( "none" margin. )
Been attempting to layer and image over the top left corner of a div container; iv achieved it once but it didn't stick to position if the page was adjusted!
^^ This is what im redesigning
^^ This is what ive managed to design myself
I have come across different posts and answers suggesting that I try to use:
display: block, relative
position: block, relative
margins, float: start
In the end I am stumped an have resorted to removing most displays besides for the p tags an its composed container:
This is the CSS I have been trying to use to make this happen
.roadmap__section__container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 100%;
max-height: 100%;
background-color: #383636;
align-items: center;
}
.roadmap__header {
font: 3rem "Nunito";
margin: 3% 50% 3% 50%;
}
.roadmap__phase__one {
width: 100%;
height: 100%;
}
.phase__one__img {
width: 10%;
position: absolute;
margin-left:10%;
}
.phase__one__data {
display: flex;
flex-direction: column;
width: fit-content;
height: fit-content;
align-items: flex-start;
justify-content: center;
text-align: center;
padding: 25px;
margin: 0% 5% 5% 15%;
box-shadow: 1px 1px 40px #ff00e6;
outline-color: #ff00e6;
outline-offset: 0px;
outline-style: solid;
outline-width: 3px;
border-radius: 25px;
}
.phase__one__data p {
font-size: 1.75rem;
color: #fff;
font-family: "Nunito", serif;
padding: 5px 10px;
}
Here is the HTML Code used for my redesign:
<section class="roadmap__section__container">
<h1 class="roadmap__header">Roadmap</h1>
<div class="roadmap__phase__one">
<img class="phase__one__img" src="images/CasinoWRLD__dice1" alt="">
<div class="phase__one__data">
<p>- Working To Perfect The NFT Artwork.</p>
<p>- Finalise The Marketing Plan.</p>
<p>- Plan And Develop Casino WRLD.</p>
</div>
</div>
</section>
.phase__one__img {
grid-column: 3;
width: 11%;
position: absolute;
top: 157.5%;
right: 32%;
}
.phase__zero__img {
grid-column: 1;
width: 11%;
position: absolute;
margin-left: 5%;
top: 119.75%;
}
I've found this to work currently but it is not a 100% answer, if the browser height is adjust the settings regarding ''top:157.5%'' needs to be adjusted accordingly or it will not line up with the top-left corner of the div container
The difference in the two is pertaining to it switches back and forth going down the page
Edit: here is a CodePen with CSS / HTML
I spend the weekend creating a CSS card for a website, only to realize that it's not responsive, at all. I'm not very well versed in CSS or responsive design, so I am hoping someone with more experience can help me out. So far, I've tried playing around with the #media tag, but I have not had any success. This is the relevant CSS:
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background: #ffffff;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.courses-container {
}
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
max-width: 100%;
margin: 20px;
overflow: hidden;
width: 1300px;
}
.course h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.course h2 {
letter-spacing: 1px;
margin: 10px 0;
}
.course-preview {
background-color: #2a265f;
color: #fff;
padding: 30px;
max-width: 250px;
}
.course-preview a {
color: #fff;
display: inline-block;
font-size: 12px;
opacity: 0.6;
margin-top: 30px;
text-decoration: none;
}
.course-info {
padding: 30px;
position: relative;
width: 100%;
}
.right-container {
padding: 30px;
background-color: #fff;
width: 30%;
line-height: 200%;
}
.progress-container {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress {
background-color: #ddd;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after {
border-radius: 3px;
background-color: #2a265f;
content: '';
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 10%;
}
.progress-text {
font-size: 10px;
opacity: 0.6;
letter-spacing: 1px;
}
This is a simple suggestion, using CSS Grid. It's a two column card (as yours): the left column width-fixed (300px), the right column width-fluid. I've applied a little gap between them just to make my example clearer.
.card {
max-width: 1000px;
display: grid;
grid-template: "left right" / 300px 1fr;
background-color: #fed330;
border-radius: 10px;
height: 300px;
}
.card>* {
padding: 20px;
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
#media screen and (max-width: 700px) {
.card {
grid-template: "left" "right" / 100%;
}
}
<div class="card">
<div class="left">
Lorem ipsum....
</div>
<div class="right">
Lorem ipsum...
</div>
</div>
It could be a useful starting point.
#gaston
A good way to test and learn about CSS is to use the browser's "Inspect" feature, with which you can test the css behavior in real time.
Activating, Deactivating features, changing values, and adding new ones.
You see the result in real time.
Then just adjust your code according to your tests.
Just right-click on the area you want to inspect. and then Inspect.
You will see an area with HTML and another with CSS.
Click on the areas in HTML and see the corresponding css.
***** Then just test to find the desired result.
That's how I found the solution in your code:
In the ".course" class of your css you added the "width" property twice.
"max-width: 100%;"
"width: 1000px;"
However, the last property entered has priority over the previous ones.
"width: 1000px;" is defining that your card will ALWAYS have 1000px.
SOLUTION:
Just remove: "max-width: 100%;"
And Modify "width: 1000px;" for "max-width: 1000px;"
So your card will have a maximum of 1000px, the minimum will be defined according to the width of the window
It will look like this:
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba (0, 0, 0, 0.2);
display: flex;
margin: 20px;
overflow: hidden;
max-width: 1000px;
}
The #media function will set the css when the screen is adjusted to a minimum or maximum width chosen by you.
What is defined within #media will have priority over other css. but only when the window meets the width you set.
You can use this to change the shape of your card completely to very small screens, placing the purple part on top of the card for example.
If you've solved your problem, mark the right answer to help others.
Good luck.
I am new to HTML and CSS and I am working on a Page here for school.
I don't know how i can adjust the size of my figures Schutzklasse 1-3 with their Text. If you Zoom the text gets smaller but the basic picture not.
You dont need everything in the CSS because i have more pages. I just need help on my main page.
I tried things like width or margin and text align but it didn't work. I don't know what to do then.
I hope u can help me.
figure,
figcaption {
margin: 0;
padding: 0;
}
.gallery {
display: block;
text-align: center;
}
#gallery {
display: grid;
grid-template-columns: repeat(3, minmax(7em, 1fr));
gap: 10%;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
#gallery figure {
position: relative;
color: black;
background: white;
}
figure img {
width: 100%;
position: relative;
display: block;
}
#gallery>figure>figcaption {
position: absolute;
bottom: 0em;
width: 100%;
line-height: 2.1em;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#gallery>figcaption {
grid-column: 1 / -1;
}
#gallery>figure>figcaption {
opacity: 0.4;
bottom: -3em;
transition: all 0.1s ease;
}
#gallery>figure:hover>figcaption {
opacity: 1;
bottom: -2em;
}
.m1 {
border: 3px solid #4CAF50;
padding: 5px;
margin-left: 15%;
margin-right: 15%;
margin-top: 5%;
margin-bottom: 5%;
}
.img1 {
float: right;
}
.m1::after {
content: "";
clear: both;
display: table;
}
.img1 {
height: 30%;
width: 300px;
margin-top: 2%;
margin-bottom: 4%;
margin-left: 4%;
}
.ans1 {
display: inline-block;
width: 320px;
padding: 20px;
border: 5px solid gray;
margin: 10px;
}
.a1 {
margin-left: 15%;
margin-right: 15%;
}
h2 {
margin-left: 3%;
}
ul {
margin-left: 5%;
margin-top: 8%;
}
body {
color: rgba(50, 50, 50, 1.0);
background: rgba(200, 200, 200, 0.825);
}
h1 {
text-decoration: underline;
text-decoration-color: blueviolet;
text-align: center;
margin-bottom: 2em;
}
b {
text-decoration: underline;
}
h3 {
text-shadow: 2px 2px rgb(255, 255, 255);
text-align: center;
margin-bottom: 2em;
}
h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 2em;
}
<h1>Der VDE Guide</h1>
<p> </p>
<h3>Bitte wählen Sie eine der Schutzklassen:</h3>
<div class="gallery">
<figure id="gallery">
<figure>
<a href="messungSK1.1.html">
<img id="sk1" src="schutzklasse1.png">
</a>
<figcaption>Schutzklasse 1</figcaption>
</figure>
<figure>
<a href="messungSK2.1.html">
<img id="sk2" src="schutzklasse2.png">
</a>
<figcaption>Schutzklasse 2</figcaption>
</figure>
<figure>
<a href="messungSK3.1.html">
<img id="sk3" src="schutzklasse3.png">
</a>
<figcaption>Schutzklasse 3</figcaption>
</figure>
</figure>
</div>
[Ctrl-MouseScroll] or [Ctrl+]/[Ctrl-] (browser functionality) act differently compared to resizing the browser. Using the [Ctrl] zooming functions, the browser will act as if it is a different (larger/smaller) device, while resizing the the browser window just changes the available space on the given device (for now, I'm assuming your development desktop PC). This means that when you deeply zoom-in you are essentially looking at a very large smartphone.
With your CSS img {...width: 100%... } you want to scale the images to fill the maximum of the available space (on a very large smartphone), while you want the zooming to literally resize them. I don't know the technical specifics behind this, but you simply cannot have both.
So you need to choose either resize to fit and discard the zooming, or enable zooming and leave out the img {...width: 100%... } and replace it with:
figure img {
display: block; /* removes unwanted space below (default 'inline') */
object-fit: cover; /* resize and clip when too large (change to your needs) */
max-width: 100%; /* dont' go outside parent ('overflow: hidden' won't work) */
margin: 0 auto /* center horzontally in parent */
}
I have created a snippet with your code in which I added my solution, but also changed/simplified a few things:
for clarity removed unused CSS
also for clarity, moved EYE-CANDY only properties to their own section. Less optimized, but more clear CSS for the demo.
heavily commented CSS where applicable
you used <figure>s inside a <figure>, while totally legal, it unnecessarily complicated the structure of .gallery. I removed the extra layer.
changed the original grid-template-columns 3 to auto-fit so the grid nicely wraps when the viewport becomes too narrow.
corrected the gap error to grid-gap
changed the .gallery margins to padding and used margin to horizontally center .gallery
changed background to background-color where applicable. While background is legal, it is also a shortcut property for various background settings. This becomes particularly important when you want to blend/mix background-color with background-image. In specific cases background overrides one of them (depending on how you defined the CSS) obfuscating a nice little bug that could keep you busy for a while. Just get used to using background-color.
Do try out <body outlines="1"> as you will learn from the output that you have overlapping elements issues that might need to be addressed!
And the zooming now works as you want...
The snippet
/* for debugging */
[outlines="1"] * { outline: 1px dotted }
figure,figcaption { margin: 0; padding: 0 }
figure img {
display: block; /* removes unwanted space below (default 'inline') */
object-fit: cover; /* resize and clip when too large (change to your needs) */
max-width: 100%; /* dont' go outside parent */
margin: 0 auto /* center horzontally in parent */
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); /* changed 3 to 'auto-fit' */
/* original 7em, now in pct of 1920 (average desktop) => 7 * 16 / 19.2 */
grid-gap: 10%; /* MOD, was 'gap' */
text-align: center;
padding: 0 10%; /* 10% L/R space */
margin: 0 auto /* center in parent */
}
.gallery figure {
position: relative;
/* some spacing after wrap */
margin-bottom: 2em; /* modify to your needs */
}
.gallery>figure>figcaption {
position: absolute;
width: 100%;
line-height: 2.1em;
color: white;
background: rgba(0, 0, 0, 0.7);
bottom: -3em; opacity: 0.4;
transition: all 0.1s ease;
}
.gallery>figure:hover>figcaption {
bottom: -2em; opacity: 1;
}
/******************/
/* EYE-CANDY only */
/******************/
.gallery figure {
color: black; background-color: white;
}
.gallery>figure>figcaption {
color: white; background-color: rgba(0, 0, 0, 0.7);
}
body {
color: rgba(50, 50, 50, 1.0); background-color: rgba(200, 200, 200, 0.825);
}
h1 {
text-decoration: underline;
text-decoration-color: blueviolet;
text-align: center;
margin-bottom: 2em;
}
h3 {
text-shadow: 2px 2px rgb(255, 255, 255);
text-align: center;
margin-bottom: 2em;
}
<body outlines="0">
<h1>Der VDE Guide</h1>
<p> </p>
<h3>Bitte wählen Sie eine der Schutzklassen:</h3>
<div class="gallery">
<figure>
<a rel="noopener" target="_blank" href="messungSK1.1.html">
<img id="sk1" src="https://via.placeholder.com/200/DC143C/FFF8DC?text=schutzklasse1">
</a>
<figcaption>Schutzklasse 1</figcaption>
</figure>
<figure>
<a rel="noopener" target="_blank" href="messungSK2.1.html">
<img id="sk2" src="https://via.placeholder.com/200/7CFC00/000000?text=schutzklasse2">
</a>
<figcaption>Schutzklasse 2</figcaption>
</figure>
<figure>
<a rel="noopener" target="_blank" href="messungSK3.1.html">
<img id="sk3" src="https://via.placeholder.com/200/6495ED/FFF8DC?text=schutzklasse3">
</a>
<figcaption>Schutzklasse 3</figcaption>
</figure>
</div>
</body>