Chrome <video> squished while in fullscreen mode - javascript

I have a webcam feed that is coming in and we are using the following options for the constraints:
const maxSize = 1920;
stream.getTracks()[0].getTracks()[0].applyConstraints({
width: {
exact: maxSize,
},
height: {
exact: maxSize,
},
aspectRatio: {
exact: 1.0,
}
});
If I check after to make sure the constraints have applied using:
const settings = this.stream.getTracks()[0].getSettings();
console.log('video settings: ', settings);
I can see the width and height are both 1920 and the aspect ratio is 1.0. The webcam is able to go up to like 4000x3000.
I am then streaming that to a video tag that has a height and width of 1920px.
<div class='container'>
<video id="selfie-video" width="1920" height="1920" />
</div>
.container {
width: 1080px;
height: 1920px;
overflow: hidden;
}
#selfie-video {
margin: 0;
padding: 0;
object-fit: cover;
width: 1920px;
height: 1920px;
left: -420px;
position: absolute;
top: 0;
}
I am displaying this on a screen that is set to portrait mode 1080x1920. When I test this in Chrome I have no issues at all unless you hit F11 and put Chrome into Fullscreen Mode or if you open it in electron. As soon as Chrome goes into fullscreen mode or you open it in electron the width is constrained to 1080px. It allows the width to be less than 1080px but not more. I can set it to something crazy like 4000px width and it is just completely ignored. Same goes with height you can set the height anything up to 1920px tall, but if you go over that it is just ignored.
This is causing the image to get squished because 1920px wide is be crunched into 1080px.
The reason we do 1920x1920 is because we let people rotate the image, so we use css to do a transform: rotate(90deg); so it needs to be 1920px for both dimensions.
I can't find any documentation or explanation as to why this is happening. No issues with overflow on any other type of element but this <video>.

So we figured out how to trick it into displaying right. We had to add a top: 5px; position: fixed; I guess it tricks Chrome into thinking the video isn't fullscreen. It isn't perfect because we have a small bar at the top above the video but it will work. I attached 3 screenshots, one so you can see it working and the video isn't squished, and then two with those 2 css rules disabled.

Related

A good alternative to this use of CSS "width: fit-content" in a responsive layout?

I'm working on creating a responsive layout for this website: https://json-z.org/
The layout follows a typical pattern of spreading out horizontally when screen real estate permits, but then using more and more vertical stacking of components as screen/window dimensions narrow.
At phone-sized portrait widths, however, I found I needed to squeeze things just a bit more than vertically stacking could accomplish. My first method of paring down required width looked like this:
#media screen and (max-width: 374px) {
.details-wrapper {
margin: -10% -15% -15% -10%;
}
.details {
transform: scale(0.80);
}
}
This got the job done, but I really wanted something that smoothly applied just as much scaling down as necessary, and no more, for any particular screen width, and that also automatically computed just the right margins to match any particular scaling factor.
To make a long story short, I created an Angular component to do the job, and the code can be found here: shrink-wrap.component.ts, shrink-wrap.component.html, shrink-wrap.component.scss.
What concerns me is that I'm relying on width: fit-content to make this work.
.outer-wrapper {
position: relative;
}
.sizer {
height: 1px;
opacity: 0;
position: absolute;
width: 100%;
z-index: -1000;
}
.inner-wrapper {
overflow: visible;
position: relative;
width: -moz-fit-content;
width: fit-content;
}
The MDN website describes fit-content as:
This is an experimental API that should not be used in production code.
Despite this warning, however, the CSS is working well for Chrome on Windows and Mac, Firefox on Windows and Mac, and Safari on Mac and iOS (as tested on both a big iPhone XS Plus and a tiny iPhone 5S). It works OK on Edge for typical desktop usage, but falls a part a bit at very narrow window sizes.
Oddly enough, the following is not listed as experimental:
.some-class {
display: grid;
grid-template-columns: fit-content(100%);
...
...but wasn't anywhere near as compatible across as many browsers.
Can anyone recommend a better alternative to fit-content?
What I need is for the container of the panel I'm trying to shrink to go no smaller than the minimum the panel requires, while both a sibling of that container, and the parent of both, get smaller as screen/window width demand.
While inner-wrapper is 362 pixels wide, sizer and outer-wrapper are both only 336 pixels wide, and it's precisely this ratio, 336/362, that tells me the exact amount of scaling that I need.

Website look different on different monitor resolutions & css not working

I am building a simple login website and I keep on running into the same problems over and over again. I would fix my css and once I switch it to my second monitor, because i am doing dual screen, it stretches out and looks bad. I researched this and found that i can add
$("document").ready(function() {
var screenHeight = screen.height;
if (screenHeight < 800) {
$('body').css('zoom', 0.);
} else {
$('body').css('zoom', 1);
}
to my code but it made the media queries change position and I had to do countless editing to just get the same results. If someone can please look at my code and help me out? Basically I am just trying to get everything to look smooth on different screen resolution. And also "#img-div, #login-div" isnt allowing me to move he div's back up. It seems broken and I am sure its something to do with the media queries. Here is my code
https://jsfiddle.net/etjhyw0j/
On Second monitor
https://gyazo.com/5460eb6b46b9029945eff2cbbcc6c853
On Laptop screen
https://gyazo.com/8ddbd518e0f8d8a70af1612393939925
My screen resolution is 1366 X 768
Second screen resolution is 1920 X 1080
just set a decent max-width to your #container.
#container{
width: 100%;
min-width: 200px;
max-width:700px;
height: 100%;
margin: 0 auto;
position: relative;
top: 0%;
}
oh, and set the body background-size to "cover" or "contain" to prevent deforming the aspect ratio, don't use 100% 100%.
https://jsfiddle.net/etjhyw0j/4/

Change the dimensions of a fullscreen html5 video

Is there a way to modify how the fullscreen functionality of a video behaves in a browser? I would like to display the video on the left side of my screen and an image (actually a PDF) on the right side.
I have tried it with css in chrome:
video:-webkit-full-screen
And that gave me some results, but not the desired one. Should I create a custom action for this? And if so, how can I let the video break out of the borders of the browsers?
You should insert the <video> tag inside a <div> with a defined height and width with the following attributes:
.video-container {
position: relative;
height: auto;
width: 60%;
}
video {
width: 100%;
max-width: 500px; // Or whatever value on your choice
height: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
With a width of 100%, the video would fill the entire browser space but limit how big it can be by setting a max-width or max-height for the resolution and the responsiveness. I hope that my answer helps you!
EDIT
To fit in properly inside a div, you have to assign to the container position: relative and position: absolute to the video itself. If you want to break out from the borders, then you have to tweak the dimensions of max-height and max-widthof the video.
Check this question, since it is similar to yours.

problems calculating div width in jquery with safari browser

I have a div that contains an image, in css I set the image height to 100% (inherit div's height), and the image width to auto, since I have different images with different widths but I want the all to have the same height.
I am also using jquery script to read the image's width and use it a number. everything works just fine in all browsers, except for safari.
when I used a jquery alert to get the value of the width I got 0 in safari (all other browsers returned valid values)
Clearly, there is some issue with the safari browser here, can anyone help me to find a solution for this?
here is a simplified example of the code:
css:
.example-div { height: 500px; width: 100%; position: absolute; }
.example-div img { height: 100%; width: auto; position: absolute; left: 0; }
html:
<div class="example-div">
<img src="example.jpg" />
</div>
jquery:
var i= $('.example-div img').width();
$('.example-div img').css('left', i);
* I forgot to mention - I am running the safari browser from windows O/S. I don't know if this issue occurs also on a mac PC *

Chrome v23 didn't support viewport scale or viewport meta tag?

I made a HTML5 Webapp and I want it auto scaled by window size on PC (not mobile).
so I add it in css:
#-ms-viewport { width: 1024px; }
#-webkit-viewport { width: 1024px; }
#-moz-viewport { width: 1024px; }
#-o-viewport { width: 1024px; }
#viewport { width: 1024px; }
In IE10(Win8), It OK, if window is resized smaller, everything in html is smaller. the html has scaled down.
but In Chrome v23, if window is resized smaller, everything in html is NOT scaled at all.Chrome v23 didn't support viewport scale?
No, #viewport is not yet implemented in Chrome. As far as I'm aware, the viewport meta tag has only ever been implemented in mobile browsers, not desktop ones.

Categories

Resources