-
Posts
23 -
Joined
-
Last visited
BekarHaus's Achievements
-
eastside reacted to a post in a topic: How do I remove the gradient on video player?
-
BekarHaus reacted to a post in a topic: Auto-scroll picture in picture
-
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
-
BekarHaus started following Video URL Source , Auto-scroll picture in picture , Video player controls background color and 1 other
-
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
-
BekarHaus reacted to a post in a topic: Change order of mobile navigation
-
BekarHaus reacted to a post in a topic: Is there a higher CSS character limit for 7.1?
-
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 -
tuanphan reacted to a post in a topic: How do I remove the gradient on video player?
-
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
- 9 replies
-
- gallery-block
- images
-
(and 3 more)
Tagged with:
-
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
- 6 replies
-
- coding
- navigation
-
(and 1 more)
Tagged with:
-
Click HERE for the page. It's the only page I work on.
- 9 replies
-
- gallery-block
- images
-
(and 3 more)
Tagged with:
-
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
- 9 replies
-
- gallery-block
- images
-
(and 3 more)
Tagged with:
-
Thank you, Tuan. My mistake - it's visible now.
- 6 replies
-
- coding
- navigation
-
(and 1 more)
Tagged with:
-
Hello Tuan, This is what I ment, but I'll eclose a video - just to be shure. Best Duško Bekar Tuanphan01.mp4
- 9 replies
-
- gallery-block
- images
-
(and 3 more)
Tagged with: