Black bars in embedded video previews

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

It is a part inside image, you can check image again

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.

I think it is custom featured image from video, you try checking video to see if it has any options to adjust featured image

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.

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;
}}

Can you help me? I have the same problem I made a new post with more detail:

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.

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

50 minutes ago, Beyondspace said:

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

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

Thank you.

I can say the black bar is generated by Youtube, the 'hqdefault.jpg' https://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

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 

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>

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?

28 minutes ago, KhanhLy174 said:

Hi,

Thank you. Where should I put this code in?

In the footer injection

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?

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?

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

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:

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.

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:

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

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.

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

remove the script I gave you and ping me again

Hi. Any update on this?

Thanks.

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

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

Hi,

I just tried putting your code again in the Footer Injection but the below still happened:

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.
 

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;
}

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.