Jump to content

Adding alt text to an image in a custom code block

Recommended Posts

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!

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

SEOSpace Team

SEOSpace - The SEO Plugin for Squarespace.

Get a Free Squarespace SEO Audit: https://www.seospace.co.uk/squarespace-seo-audit-score

seospace-logo.png

Link to comment

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.