Jump to content

Black bars in embedded video previews

Recommended Posts

Posted

Hi everyone, I've already searched for answers in the forum but haven't been able to find any results working for me. The point is that previews from YouTube videos show black bars above and below, some sort ox extra-padding. How could I solve it?

With embedded videos, I can't load a preview (otherwise I would have solved it).

Maybe I need to change the ratio of the video (so that it would be perfect 16:9, like YouTube)?

It would be OK to me, also, if I could change the color of the bars... maybe by some options in the site style colors?

Here is my video page:
https://www.camillaripani.net/video-1

And the same problem also reverberates in home (scroll down to the video section):
https://www.camillaripani.net/

That black, dark bars are so annoying!

Thank you anyway 🙂

Camilla

 

image.thumb.png.8fb91fb007ae26d5aa3f40783c4fa886.pngimage.thumb.png.9599c740fbb4e209866cdf01fb484f0e.png

Posted

Hi Tuanpan... and why Squarespace create this added black bars and put it into the image? My question is how to avoid it. The image create by myself has no bars and it is loaded on youtube. Thank you.

Posted

No, it is not, as explained. The video is a link from youtube and the image is made from squarespace. I found olther people having the same problems and they solved putting all the bacgkround in black or managing the proportion with the css code, but I don't know how to do it. So disappointed with squaresquace for this. In its prevoius version it allowed you to change the image icon, but now it is not possible anymore.

Posted

If you want to change page background to black, use this code to Website > Website Tools > Custom CSS
 

body#collection-6500aa1918e09a5b628419b6 {
article .section-background {
    background-color: black !important;
}
article .content * {
    color: white !important;
}}

image.thumb.png.d39ce494d6944c96a30c798a814f904e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 7 months later...
Posted
On 2/20/2024 at 4:30 AM, tuanphan said:

If you want to change page background to black, use this code to Website > Website Tools > Custom CSS

Hi. I also have the same problem, and I don't want to change the background of my website to black. 

The black bars are not part of the video/image, it was generated by squarespace when you embedded the video. I would like to remove it.

Posted
On 10/15/2024 at 3:29 PM, KhanhLy174 said:

Hi. I also have the same problem, and I don't want to change the background of my website to black. 

The black bars are not part of the video/image, it was generated by squarespace when you embedded the video. I would like to remove it.

Would you mind to share your website URL so we can check it

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted

I can say the black bar is generated by Youtube, the 'hqdefault.jpghttps://i.ytimg.com/vi/-yEr2lpx1PQ/hqdefault.jpg will generate High quality thumbnail (480x360) in 4:3 ratio, and will add the black bars 

I tried with other video and this still happens https://i.ytimg.com/vi/eFcjaJZ_yDY/hqdefault.jpg

image.thumb.png.3e0f03a5f981cbaaf6ad07880bf28552.png

We can't override Squarespace choice on this, and the thumbnails is saved to the page already, so I will figure a way to override the correct thumbnail variant

Similar to this thread 

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted (edited)
30 minutes ago, KhanhLy174 said:

Hi, the URL where our videos are is: https://composites.taniq.com/winding-software-tutorials

Thank you.

Looks like you solve it by setting the ratio to 16:9 using CSS

Here is the js to replace all thumbnail on page load with the origin thumbs

<script>
window.addEventListener("load", (event) => {
  document.querySelectorAll("img[src*='i.ytimg.com']").forEach((img) => {
    const src = img.src;
    img.src = src.replace("hqdefault.jpg", "maxresdefault.jpg")
 })
});
</script>

 

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted
18 minutes ago, Beyondspace said:

Here is the js to replace all thumbnail on page load with the origin thumbs

<script>
window.addEventListener("load", (event) => {
  document.querySelectorAll("img[src*='i.ytimg.com']").forEach((img) => {
    const src = img.src;
    img.src = src.replace("hqdefault.jpg", "maxresdefault.jpg")
 })
});
</script>

Hi,

Thank you. Where should I put this code in?

Posted
On 10/16/2024 at 2:52 PM, Beyondspace said:

In the footer injection

Hello,

I tried adding the code as suggested. However, the video thumbnails were then cut off on both sides for some reason, as you can see in the attached photo.

How do I cut off the black bars nicely without cutting off parts of the thumbnails as well?

Capture 2.PNG

Posted
12 minutes ago, KhanhLy174 said:

Hello,

I tried adding the code as suggested. However, the video thumbnails were then cut off on both sides for some reason, as you can see in the attached photo.

How do I cut off the black bars nicely without cutting off parts of the thumbnails as well?

Capture 2.PNG

Did you add any code before the script? Last time I checked you was using some custom css to change the ratio of the thumbs already

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted
2 minutes ago, Beyondspace said:

Did you add any code before the script? Last time I checked you was using some custom css to change the ratio of the thumbs already

Hi,

The Custom CSS code I added was supposed to only change the size the of video on viewing page:
image.thumb.png.c720f752714aa13857d1ee73e066d6a6.png

Previously on the viewing page, the video stretched out over the entire screen, I only resized it so that it fits better within the screen like the photo above. I'm not sure if that code affects the video gallery page in any way.

Posted
2 hours ago, KhanhLy174 said:

Hi,

The Custom CSS code I added was supposed to only change the size the of video on viewing page:
image.thumb.png.c720f752714aa13857d1ee73e066d6a6.png

Previously on the viewing page, the video stretched out over the entire screen, I only resized it so that it fits better within the screen like the photo above. I'm not sure if that code affects the video gallery page in any way.

remove the script I gave you and ping me again

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

Posted
On 10/18/2024 at 5:23 PM, Beyondspace said:

remove the script I gave you and ping me again

Hi, the code was already removed once I saw that the video gallery wasn't looking good.

Posted
1 hour ago, Beyondspace said:

The code I sent you plus the css you put in the style make sure the image ratio is 16/9, what was the problem

image.thumb.png.9224e387969408c136ae109f20cb5017.png

Hi,

I just tried putting your code again in the Footer Injection but the below still happened:
Capture2.PNG.0fa47c500166f9c966719c50f8bc6185.PNG

As you can see, the thumbnails are cropped out and parts of the texts in the thumbnails are missing.

I'm unsure which Style section you were referring to where I put my CSS. I'm only aware of the Custom CSS section in Website Tools, where I put my CSS codes. 

FYI, I have again removed the Javascript code you provided after trying a second time.
 

 

  • 2 weeks later...
Posted

Use this code if you're using a summary block:

 

/* Summary Thumbnails */
.sqs-block-summary-v2 .summary-thumbnail-container img.loaded {
    aspect-ratio: 16/9;
    object-fit: cover;
}

Posted
10 hours ago, joshcohen said:

Use this code if you're using a summary block:

 

/* Summary Thumbnails */
.sqs-block-summary-v2 .summary-thumbnail-container img.loaded {
    aspect-ratio: 16/9;
    object-fit: cover;
}

Hi,

Thank you for the help. But I'm not using a summary block. It is a Video gallery page. I tried your code anyway but as expected it didn't work on a video page.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.