BekarHaus
-
Posts
23 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by BekarHaus
-
Hi Ziggy, thanks for tip — didn't know about Will Myer's plugin. I wanted to avoid animated GIF — it's eiter large or in poor quality. Best Duško Bekar
-
Hello Squarespacers, On my website I want to create presentation of websites I made. I'd like to put image of browser window (container), and within that window put animated image (background) of website. Basically I want to create similar thing as shown on Squarespce frontpage (see picture bellow) I've had some unsuccessful attempts to achive this, so I'm asking for any help or pointers how to make it. I am designer with basic programming knowledge 🙂 All the Best Duško Bekar
-
Video player controls background color
BekarHaus replied to BekarHaus's topic in Customize with code
Hi Tuan, Thank you for looking into this matter. I've searched everywhere from Stack Overflow to mdn web docs. I get solution with this custom CSS https://jsfiddle.net/z906whne/ video::-webkit-media-controls-panel { background-image: none !important; filter: brightness(0.4); } It removes gradient entirely, but with this code I was able to accomplish what I want; video::-webkit-media-controls-panel { background-image: linear-gradient(45deg,rgba(157,131,62,1) 25%, yellow, rgb(255,0,0) 50%, #00B0A3) !important; filter: brightness(1); box-shadow: none !important; } So, webkit pseudo element for video control panel is: video::-webkit-media-controls-panel You could also use other pseudo in css to control the native video like: video::-webkit-media-controls-play-button {} video::-webkit-media-controls-volume-slider {} video::-webkit-media-controls-mute-button {} video::-webkit-media-controls-timeline {} video::-webkit-media-controls-current-time-display {} In addition, I run into two problems: 1. How to reduce the height of "-webkit-media-controls-panel"? 2. On Desktop, in Chrome, Brave or Vivaldi — control customizations look different than it's in Safari, Firefox and Tor. How to make them to look the same across different browsers? Link to the site PW: Bekar2022 Best Duško Bekar -
Video player controls background color
BekarHaus replied to BekarHaus's topic in Customize with code
Hello Auspayday, Thank you for looking into this matter. I might have asked this question the wrong way, what I need to know is "class name". I've tried everything I could think of to find class name to target that specific element - without luck. Best Regards Dušan Bekar -
Hi Squarespacers, Does anyone know how to customize color of black background gradient (see attached screenshot). In Code Block I Add this video via code. Best Regards Dušan Bekar
-
How do I remove the gradient on video player?
BekarHaus replied to breemelanson's topic in Customize with code
Hi Squarespacers, I found some solutions to customize gradient on SQSP native video player. Hope you'll find it useful 😀 /* Hide controls gradient on native video player */ .video-player .plyr .plyr__controls:before { background-image: none; } /* Hide controls on native video player */ .video-player .plyr .plyr__controls { display: none; } /* Change symbol and background color of Play/Pause button */ .video-player .plyr--video .plyr__control--overlaid { color:rgba(255,255,255,0.35) !important; background: #00B0A3 !important } /* Customize video player gradient */ .video-player .plyr .plyr__controls::before { height: 25% !important; background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.9) 50%,rgba(0,176,163,.85)) !important; } /* Tablet and desktop break */ @media only screen and (min-width: 641px){.video-player .plyr .plyr__controls::before { height: 8% !important; background-image: linear-gradient(0deg,rgba(0,176,163,1),rgba(0,176,163,.95) 50%,rgba(0,176,163,.9)) !important; }} "height" is for (obviously) height of the gradient, and with "background-image" you can control color/transparency of gradient. Be cautious when using "height" property because it could cover different area on desktop/mobile. I break it for Tablet & Desktop - @media only screen and (min-width: 641px) { INSERT CODE HERE } — as you can see in screenshots bellow (there isn't black line around larger video) . /* Hide video caption */ .video-caption {display: none !important} Best Regards Duško Bekar
-
Thank you Tuan 😀 I marked it as solved.
-
Hello Tuan, Thank you very much to take your time and look into it. I managed to use relative path. > /s/filename.mp4 Absolute path is working, also. > domain.name/s/filename.mp4 So, final code is <video style="width: 100%" playsinline controls controlsList="nodownload" autoplay muted loop src="/s/filename.mp4"> <source type="video/mp4" src="/s/filename.mp4"> <body oncontextmenu="return false;"> </video> I don't know how I managed before to pick URL's for movies, but you can test it... https://video.squarespace-cdn.com/content/v1/60103bdffecb075463e39396/1edc548b-5aaa-4a3e-9510-720f60f4e956/mp4-h264-1920:1080 https://video.squarespace-cdn.com/content/v1/60103bdffecb075463e39396/1edc548b-5aaa-4a3e-9510-720f60f4e956/mp4-h264-1920:1080 Best Duško Bekar
-
Hi members! I recently ran into a problem. Little description: In Code Block I embedded video. I find previously uploaded video file in Asset Library > File Details >> Developer Tools (Chrome) > select element (video) > Copy URL >>> Paste in code in Code Block Few weeks ago it worked fine. Problem is that before structure was; https://video.squarespace-cdn.com/content/v1/.../mp4-h264-aac-1920:1080 or /mp4-h264-1920:1080 or /mp4-h264-aac-2560:1080 etc. And now structure is: https://video.squarespace-cdn.com/content/v1/.../thumbnail So, pasted code in Code Block is not video but thumbnail. In Forum I found workaround to structure code like this: yourdomain/s/videofile.mp4 But for me it is not solution, because it is relative to temporary domain while I’m working on unpublished page, on other hand “video.squarespace-cdn.com" is absolute and there is no need to change after page is published. In addition, if I paste that URL in browser it went straight to download (Do you want to allow downloads on “static1.squarespace.com”?): https://bekarhaus.squarespace.com/s/Untitled-2-Broadband-High.mp4 In Contrast if i paste: https://video.squarespace-cdn.com/content/v1/60103bdffecb075463e39396/68520104-afa3-47a5-9170-bba0d96181f9/mp4-h264-1920:1080 It plays video. Question is: where and how can I find URL structured as: https://video.squarespace-cdn.com/content/v1/.../mp4-h264-aac-1920:1080 Best Regards Duško Bekar
-
Hallo Tuan, Thank you. It's working perfectly. I only changed z-index: 99999; to z-index: 9998; Wich parameter should I change to move it from right to left corner? Best Duško Bekar P.S. I am going to send you DM
-
WOW! Excellent and very usable solution for pagination navigation. Tough, it's not what I have i mind. See example HERE. Pagination is only visible when you scroll down the page, it's aligned to inset and name of recent page is in the middle. P.S. You can see "enlarge" example as well
-
Click HERE for the page. It's the only page I work on.
-
Thank you, Tuan. it is Grid: Simple gallery with Lightbox On - so just to show "enlarge" will do the trick. I try that in different ways - but no luck
-
Thank you, Tuan. My mistake - it's visible now.
-
Hello Tuan, This is what I ment, but I'll eclose a video - just to be shure. Best Duško Bekar Tuanphan01.mp4
-
Helo Tuan, Please to meet you 🙂 I am designer from Croatia. Site is: bekar.haus / PW: Bekar2022 It’s work in progress. I’m basically working on only one gallery “Brine Photo”, to set it as ‘template’ for all of my work. All your posts on the forum are very helpuful - thank you for them Duško Bekar
-
Hello ◾️squarespacers _, I need help/advice. I want to achieve that pagination is only shown at bottom of the page, when user scrolls down. Is it even possible? Best Duško Bekar
-
Hello ◾️squarespacers _, I need help/advice. In gallery section (Grid: Simple+Lightbox) I want that on hover text "Enlarge" appear in lower right corner at bottom of the page. I tried quite a lot - but no luck. Is it even possible? Best Duško Bekar
-
Hello ◾️squarespacers _, I ran into a huge problem (by numbers). In shortest, I got to build site for car upholsterer. Problem lays in large number of possible seat covers combinations: - three base types of seat covers materials (mostly for central part of the seat), - each type has 10 different designs (average), - there are different type of material for side cushions (if you want two colour seats) - approximately 40 brands of car manufacturers, - each manufacturer has at least tree different models, - seats in each model differ due to production year… So, there are thousands of combinations. I’d tried SQSP “out-of-the-box” solution but it is time consuming beyond futile. In addition; I found excellent tutorial for adding complex variants (https://www.blackcoffeebeautiful.com/bcbblog/adding-squarespace-variants), but it can’t solve my problem, unfortunately. My idea was to solve this with drop down choosers. For example: - from first drop down menu customer choose car manufacturer (Alfa Romeo, Audi, BMW…). - If he choose “Audi”, on second drop down menu should only be shown Audi models (A3, A4, Q5…) - If he choose “Q5”, on third drop down menu should only be shown production years relevant to this model (2009-2012, 2012-2017, 2017-…) etc - for all other required parameters… Problem here is how to include or exclude options in next drop down menu? If anyone have a slightest pointer how to solve this, I am open for all suggestions. Best Duško Bekar PS Hope I was concise.
