Squishing My Media

[arrbee99 1560]

Not very important, just playing a bit, unsuccessfully obviously, but...

Would anyone know a bit of css to make My Media a lot bigger horizontally while also restricting its height ?

This works (from Happy2play no doubt) -

div.homeSectionsContainer div.section0 div.scrollSlider {width: 360%;}

and this will chop off the bottom of the image -

div.homeSectionsContainer div.section0 div.scrollSlider {width: 720%; height: 800px;}

but would like to try not chopping off the image but squeezing it into a narrower My Media. OR centering it vertically.

[visproduction 123]

Hi, I've worked with a lot of custom players and aspect ratio.  I believe the video aspect ratio can only be adjusted by changing or forcing a temporary change to metadata inside the file.  All CSS window changes only shows more or less area, around or cropping into the video.  It's like holding an adjustable frame in front of a TV or photograph.  You can change the frame all you want the TV video or image behind will not squeeze or stretch.

Wrong aspect ratio, squeezed or stretched is built into the video.  I think a lot of people find confusing is that full featured video players can adjust the aspect ratio by forcing a meta data value overriding the file information.  CSS cannot do this.  I am not sure that a browser player has the option to override values inside the video file, like VLC player can do.  I think that function is left out of all built in browser online playback.

The best solution is to fix the Aspect ratio of the media so it's no longer wrong.  You can do this with a video editor,  ffmpeg or AVIdemux or higher end editors can all do it.  To get good quality with a reasonable bitrate, you will probably need a setting that takes some time to convert.  Otherwise, there will be a lot of pixelation.  If you have a full fledge editing workstation with supporting video encoding hardware, then you can do a pretty good job much faster.  Everytime I do this for a 1080P media, it takes around 3 - 4 times the video length on a i7 mid size worksation.

I have a webpage devoted to fixing such videos using AVIDemux.  It's illustrated and overly complex.  It's also quite good at solving insomnia.  Just read the first 3 pages. Ha.

https://www.producerelease.com/blu-ray/parcalc.htm

Hope that helps.

[arrbee99 1560]

Interesting. Thanks for the link.

...except not really what I want to do. I just want to use css in Emby to make the My Media (for now) items bigger but a bit squashed, or put another way, want to stretch them horizontally and vertically but vertically by a smaller amount.

[visproduction 123]

AB,

Whoops, I didn't pay attention to your text.  I use this for hover on the My Media thumbs.  The verticalSection.section3 is my setup where I have My Media again at the bottom of the HP.

You could just remove the :hover and add something like height:65%; and you would be pretty close to what you are trying to do. The transform and margin adjustment is the hover over thumbs pop up in size with a nice border.  Don't want that, just take it out.  I like it.

Hope that helps.
 

.verticalSection.section0.focusable.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX > div > div > div:hover, .verticalSection.section3.focusable.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX > div > div > div:hover {
	transform: scale(1.06);
	margin-bottom: -3% !important;
	border: 1px solid #7372e9;
	box-shadow: 0 0 10px #719ece;
}

 

Edited December 16, 2022 by visproduction

[Happy2Play 8282]

@arrbee99 You looking for something like this?

div.verticalSection.section0 div.cardBox {height: 250px}
div.verticalSection.section0 div.backdropCard {width: 100%}
div.verticalSection.section0 div.cardBox div.cardOverlayContainer {
    height: 100%;
    width: 100%;
}
div.verticalSection.section0 .scrollbuttoncontainer-backwards, div.verticalSection.section0 .scrollbuttoncontainer-forwards {height: 80%}

Depending on resolution

with scroller

without scroller

[arrbee99 1560]

Couldn't get Height to work.

This seems to work a bit -

div.homeSectionsContainer div.section0 div.scrollSlider {width: 720%; !important;}
div.homeSectionsContainer div.section0 div.scrollSlider {scale: 1 70%;}

So that makes My Media items huge, fill most of the screen and then squishes a bit vertically so as to allow the row below it to be seen below. Or thats the idea, except it takes up to much space vertically......

 

Anyway, I'm leaving the above there cause I typed it already, but looks like Happy2play has it all sorted. I just changed the height a teeny bit -

 

[arrbee99 1560]

Now just need a way to move Latest Movies up to the top row, turn the poster images into thumbs and make those huge instead. No problem...

[visproduction 123]

AB,
You can control what row order each user sees in the home screen inside the dashboard / Home screen / Home Screen Section 1

If you put Latest Media as the first choice, then all the libraries if you more than one will appear before you get to your My Media row.  That is not really user friendly.  My Media should be on top where the main selection to jump to different areas is expected by the user.

[cochize1 41]

Don't want to start the new topic since this is something similar: how can I make My Media ALWAYS fit the width of the screen even after changing zoom on the browser or scaling to i.e. 150% in Windows settings? Is that even possible?

Above picture is for My Media with Chrome zoom 100% and Windows scale 150% (with reccomended 125% it looks ok) and this bit of code:

div.section0  {	width: 100%;}