Adding alt text to an image in a custom code block

Hello,

I am trying to optimize my website for SEO and I am seeing an issue with my video embeds. I have videos embedded about halfway down my page. They are youtube embeds and on top of the embed is a custom image that I uploaded from my library. I am trying to add alt text to the descriptions and can't figure out how. The functionality of adding alt text to an embed is very different than adding it to an image. Hoping you can help, thanks!

Hi - @scottgoodfriend

I'm pleased to help you with this issue. Here are some potential solutions that might be helpful:

• Unfortunately, it's not possible to add alt text directly to a video or embed a video’s custom featured image manually on Squarespace.
• However, you can implement a workaround by using custom code. Here's how you can do it:
  • Edit page > Add Section > Add code block > Add your custom code > Save

Suggested code solution:
 

<div id="custom-video-container" style="cursor: pointer; position: relative; width: 560px; height: 315px;" onclick="playCustomVideo()">
    <img src="YOUR_CUSTOM_IMAGE_URL" alt="ALT_TEXT_HERE" style="width: 100%; height: auto;">
    <svg style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; cursor: pointer;" viewBox="0 0 68 48" aria-label="Play" title="Play">
        <path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path>
        <path d="M 45,24 27,14 27,34" fill="#fff"></path>
    </svg>
</div>
<script>
function playCustomVideo() {
    var container = document.getElementById('custom-video-container');
    container.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
}
</script>

Note:

• You need to add the source image, YouTube video ID, and alt text to this code. I have indicated where to make these additions. Please review the code accordingly.
• You can change the iframe width and height size.

If you require further clarification, please don't hesitate to ask.

Best regards,
Sadul Sifat