Jump to content

BekarHaus

Circle Member
  • Posts

    23
  • Joined

  • Last visited

1 Follower

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. Thank you Tuan 😀 I marked it as solved.
  8. 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
  9. 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
  10. 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
  11. 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
  12. Click HERE for the page. It's the only page I work on.
  13. 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
  14. Thank you, Tuan. My mistake - it's visible now.
  15. Hello Tuan, This is what I ment, but I'll eclose a video - just to be shure. Best Duško Bekar Tuanphan01.mp4
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.