如何修改网站中嵌入的Wistia弹窗SVG播放图标颜色？

Hey Nathan, totally get it—when you're new to building sites, small styling tweaks can feel tricky. Let's get that Wistia popover icon matching your other white play buttons in no time. Here are two straightforward ways to do this:

Option 1: Directly Edit the SVG Code (Quickest Fix) #

Your existing SVG doesn't have a specified fill color, which is why it's not showing up white. You can add the fill attribute directly to the SVG element to force it to white.

Take the SVG part of your embed code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M265 96c65.3 0 118.7 1.1 168.1 3.3h1.4c23.1 0 42 22 42 49.1v1.1l.1 1.1c2.3 34 3.4 69.3 3.4 104.9.1 35.6-1.1 70.9-3.4 104.9l-.1 1.1v1.1c0 13.8-4.7 26.6-13.4 36.1-7.8 8.6-18 13.4-28.6 13.4h-1.6c-52.9 2.5-108.8 3.8-166.4 3.8h-10.6.1-10.9c-57.8 0-113.7-1.3-166.2-3.7h-1.6c-10.6 0-20.7-4.8-28.5-13.4-8.6-9.5-13.4-22.3-13.4-36.1v-1.1l-.1-1.1c-2.4-34.1-3.5-69.4-3.3-104.7v-.2c-.1-35.3 1-70.5 3.3-104.6l.1-1.1v-1.1c0-27.2 18.8-49.3 41.9-49.3h1.4c49.5-2.3 102.9-3.3 168.2-3.3H265m0-32.2h-18c-57.6 0-114.2.8-169.6 3.3-40.8 0-73.9 36.3-73.9 81.3C1 184.4-.1 220 0 255.7c-.1 35.7.9 71.3 3.4 107 0 45 33.1 81.6 73.9 81.6 54.8 2.6 110.7 3.8 167.8 3.8h21.6c57.1 0 113-1.2 167.9-3.8 40.9 0 74-36.6 74-81.6 2.4-35.7 3.5-71.4 3.4-107.1.1-35.7-1-71.3-3.4-107.1 0-45-33.1-81.1-74-81.1C379.2 64.8 322.7 64 265 64z"></path>
  <path d="M207 353.8V157.4l145 98.2-145 98.2z"></path>
</svg>

Modify the opening <svg> tag to include the white fill:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#ffffff">
  <path d="M265 96c65.3 0 118.7 1.1 168.1 3.3h1.4c23.1 0 42 22 42 49.1v1.1l.1 1.1c2.3 34 3.4 69.3 3.4 104.9.1 35.6-1.1 70.9-3.4 104.9l-.1 1.1v1.1c0 13.8-4.7 26.6-13.4 36.1-7.8 8.6-18 13.4-28.6 13.4h-1.6c-52.9 2.5-108.8 3.8-166.4 3.8h-10.6.1-10.9c-57.8 0-113.7-1.3-166.2-3.7h-1.6c-10.6 0-20.7-4.8-28.5-13.4-8.6-9.5-13.4-22.3-13.4-36.1v-1.1l-.1-1.1c-2.4-34.1-3.5-69.4-3.3-104.7v-.2c-.1-35.3 1-70.5 3.3-104.6l.1-1.1v-1.1c0-27.2 18.8-49.3 41.9-49.3h1.4c49.5-2.3 102.9-3.3 168.2-3.3H265m0-32.2h-18c-57.6 0-114.2.8-169.6 3.3-40.8 0-73.9 36.3-73.9 81.3C1 184.4-.1 220 0 255.7c-.1 35.7.9 71.3 3.4 107 0 45 33.1 81.6 73.9 81.6 54.8 2.6 110.7 3.8 167.8 3.8h21.6c57.1 0 113-1.2 167.9-3.8 40.9 0 74-36.6 74-81.6 2.4-35.7 3.5-71.4 3.4-107.1.1-35.7-1-71.3-3.4-107.1 0-45-33.1-81.1-74-81.1C379.2 64.8 322.7 64 265 64z"></path>
  <path d="M207 353.8V157.4l145 98.2-145 98.2z"></path>
</svg>

Replace the original SVG in your Wistia embed code with this modified version, then re-add the code to your Showit site. The icon should now appear white.

Option 2: Add Custom CSS (More Flexible for Future Changes) #

If you prefer a more flexible solution (so you can adjust the color easily later), add this code to your Showit site's custom CSS section (usually found in Site Settings > Custom Code):

/* Force Wistia popover icon to be white */
.wistia_embed .se-icon svg {
    fill: #ffffff !important;
}

The !important flag ensures this style overrides any default colors from Wistia's embed code.

Either method should get your icon matching the others perfectly. Let me know if you hit any roadblocks!

内容的提问来源于stack exchange，提问作者Nathan Reimche-Vu