arrbee99 1561 Posted December 15, 2022 Share Posted December 15, 2022 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. Link to comment Share on other sites More sharing options...
visproduction 124 Posted December 16, 2022 Share Posted December 16, 2022 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. Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted December 16, 2022 Author Share Posted December 16, 2022 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. Link to comment Share on other sites More sharing options...
visproduction 124 Posted December 16, 2022 Share Posted December 16, 2022 (edited) 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 Link to comment Share on other sites More sharing options...
Happy2Play 8332 Posted December 16, 2022 Share Posted December 16, 2022 @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 1 Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted December 16, 2022 Author Share Posted December 16, 2022 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 - Link to comment Share on other sites More sharing options...
arrbee99 1561 Posted December 16, 2022 Author Share Posted December 16, 2022 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... Link to comment Share on other sites More sharing options...
visproduction 124 Posted July 8, 2023 Share Posted July 8, 2023 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. Link to comment Share on other sites More sharing options...
cochize1 41 Posted August 2, 2023 Share Posted August 2, 2023 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%;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now