I'm using mux-player-react on a next.js site to implement a large background looped movie.
https://website-agobay-coming-soon-5iemrgd6o-hhag.vercel.app/
The video should be object-fit: cover to cover all the browser window. unfortunately it doesn't work.
eather with:
.videoMob {
--controls: none;
--media-object-fit: cover;
--media-object-position: center;
or:
.videoMob {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
object-fit: cover;
It's strange, if I use the mux-video-react class, it works fine but the video has a jumpcut and it don't show the video on mobile devices.
thanks
object-fit seems to be working but the video doesn't take up all the vertical space of its parent element. If you can use height: 100vh on the video tag, it should work.
On another note - for a background video like this, native HTML5 video does the job as well ...
You can modify your videoMob class styles to look like this, it should solve your issue:
.videoMob {
position: absolute;
inset: 0;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
object-fit: cover;
}
Let me know if you have any other questions around using mux-player!
Related
I have a progressive web app developed in reactjs and in this
I am using banner images which look good on mobile view, but when I switch to laptop view the banner images look big.
I tried to set the height property, but the image looks squeezed on laptop view.
The CSS code for the same is pasted below
banner-container {
padding: 20px;
margin-top: 45px;
.banner-img {
max-width: 100%;
height: auto;
}
}
#media (min-width: 767px) {
.banner-container {
padding: 20px;
margin-top: 200px !important;
max-width: 100%;
.banner-img {
width: 100%;
height: auto;
max-height: 300px;
}
}
}
What is the best way to display banner images which look good on both laptop and mobile view
You can easily manage your banner image with this css property:
object-fit: contain
Or you can look into different values of object-fit in this doc:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I inspected the code in the browser inspect. I know which specific property needs to be changed but I thing I need to point its key to a different class name.
I would like to change the overflow property to hidden and i would mike to remove the border and border-radius.
.dzu-dropzone {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 120px;
overflow: scroll;
margin: 0 auto;
position: relative;
box-sizing: border-box;
transition: all .15s linear;
border: 2px solid #d9d9d9;
border-radius: 4px;
}
If it is not already created, create index.scss file in your project repo.
there , add the code like this:
.dzu-dropzone {
overflow: hidden;
}
This will override the css while rendering. You can do the same for the border properties too.
Youc can create two CSS files, a basic.css file with some minimal styling, and a more extensive dropzone.css. I added both and the style of my component was overriden.
So this is my problem, I am trying to print some components in React using window.print, my components have defined sizes say 5cm x 5cm, I have hidden all other components in the print page (note that the styling of the whole page is somehow complex to post here), the problem is that my components get resized when on the print page. I have looked a lot but nothing has worked for me.
Note that when I tested the same print in a different page (with no complex styling) it worked fine. So is there any way to pass the styles to the print window or "Override" the styling so that my components get rendered correctly?
Thanks.
EDIT: Here is my CSS. This is working fine in a fresh app so there must be something I used messing things up, I removed all #media print from Bootstrap CSS files but no luck.
I tried to put the code inside as well as outside the #media print but no luck as well.
As far as I know media should render real physical lengths and units, any help would be appreciated.
Thanks again
.print-only {
display: none;
}
#media print {
#page {
margin: 0;
size: a4 !important;
}
body {
margin: 0.5cm !important;
padding: 0;
}
.print-only {
margin-top: 20px;
display: block;
}
.no-print {
width: 100%;
margin: 0px;
display: none;
}
.Container {
position: relative;
display: block;
border: 3px solid black;
width: 6in !important;
height: 2in !important;
margin: 0;
padding: 0;
text-align: start;
}
.labels {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 6pt;
font-style: normal;
font-variant: normal;
height: 13px;
}
.container2 {
height: 39px;
font-size: 8px;
font-weight: 550;
position: absolute;
top: 20px;
right: 1in;
line-height: 13px;
text-align: center;
}
}
Recently, I've encountered with the same issue while designing a print template in React. I was totally wrong in my understanding that whatever styles I write in my CSS files will apply. Then I found there is certain semantics while are required to be followed while designing an HTML print template.
Take a look at this link. This will be very helpful for your design.
Following link is affected: https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=2753787&tc_deviceCategory=undefined&template_layout_id=5699672553&updated=1523614982274
We are experiencing problems with a form and its parent div. We tried to bring in a frosted glas style to the parent div landingboxForm, but if we are working with pseudoelements, nothing happens.
The tutorial is from here https://medium.com/#AmJustSam/how-to-do-css-only-frosted-glass-effect-e2666bafab91 and is working well for others. I just do not succeed in port it for our landing page.
Does anybody know why the :before div tag is just grey in the Chrome inspector and why it does not appear?
CSS:
.lp-sorba {
background-size: cover;
position: absolute;
width: 100%;
top: 0;
left: 0;
bottom: 0;
height: 900px !important;
}
.lp-sorba .landingpageHeader {
height: 80px;
background: #1d89d2;
}
.lp-sorba #hs-link-logo > img {
margin-top: 22px;
}
.lp-sorba .landingboxForm:before {
content:" ";
background: inherit;
left: 0;
right: 0;
top: 0;
height: 100%;
width: 100%;
bottom: 0;
box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
filter: blur(10px) !important;
}
.lp-sorba .landingboxForm {
background: inherit;
width: 100%;
height: 100%;
position: relative;
border-radius: 5px;
box-shadow: 0 23px 40px rgba(0,0,0,0.2);
padding: 20px;
border: 0.5px solid #edebeb;
}
As for your question
why the :before div tag is just grey in the Chrome inspector and why it does not appear?
Your pseudo element is collapsing right know. Add position: absolute; to the .lp-sorba .landingboxForm:before rule.
But that won't solve your underlying problem / won't create the frosted glass effect.
The way how filters work is: they get applied to the element itself only, not the ones lying behind it.
In the example from Medium/Codepen, the form element inherits the background from the main element. By that it's pseudo element may apply a filter to it.
In your setup, the form is positioned absolute, while the image tag is also positioned absolute. The forms filter won't bleed into that image tag.
Revisit the example:
apply a background image to a parent container
inherit that in the form
pseudo filter on the form will blur the forms inherited background
I am trying to make a border/frame around a full screen background picture.
I could make it using border but I could not create a space between the edge and the frame. https://s3.amazonaws.com/uploads.hipchat.com/44798/299518/TieMyM2f0EXsUsK/frame.png
Also the second thing is to create a hole on the bottom side of the pic.
If you guys have any advises, I would really appreciate.
Thanks for you help,
Richard
I cannot help you about the hole but you can set padding and magrin with css to your image to create the space between the end of image and the border and the screen.
I'm not sure if thats what you mean, but maybe try something like this (tested on chrome)
<div id="cont">
<div id="break"></div>
</div>
#cont {
border: 1px solid red;
width: 90%;
height: 300px;
}
#break {
position: relative;
margin: 0 auto;
top: 100%;
bottom: 1px;
width: 100px;
height: 1px;
background-color: white;
}
http://jsfiddle.net/2bph38qh/