如何用CSS在NSAttributedString的HTML图片上添加播放按钮覆盖层

要在UITextView的YouTube预览图上添加播放按钮，你可以通过在生成的HTML中嵌入CSS样式实现，以下是修改后的代码和细节说明：

修改后的完整代码 #

private func formatStringWithYTVideo(text: String, with width: Float) -> String {
    let iframeTexts = matches(for: ".*iframe.*", in: text)
    var newText = text
    
    // 注入CSS样式，确保所有视频预览容器生效
    let cssStyle = """
    <style>
        .youtube-video-container {
            position: relative;
            display: inline-block;
            width: \(width)px;
        }
        .youtube-video-container::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" stroke="red" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.8;
            pointer-events: none;
        }
        .youtube-video-container img {
            width: 100%;
            display: block;
        }
    </style>
    """
    
    // 仅在文本开头添加一次样式，避免重复
    if !newText.hasPrefix(cssStyle) {
        newText = cssStyle + newText
    }
    
    if !iframeTexts.isEmpty {
        for iframeText in iframeTexts {
            let iframeId = matches(for: "((?<=(v|V)/)|(?<=be/)|(?<=(\\?|\\&)v=)|(?<=embed/))([\\w-]++)", in: iframeText);
            
            if !iframeId.isEmpty {
                // 用带样式的容器包裹视频预览图链接
                let htmlString = """
                <p>
                    <div class="youtube-video-container">
                        <a href='https://www.youtube.com/watch?v=\(iframeId[0])'>
                            <img src="https://img.youtube.com/vi/\(iframeId[0])/maxresdefault.jpg" alt="YouTube视频预览"/>
                        </a>
                    </div>
                </p>
                """
                
                newText = newText.replacingOccurrences(of: iframeText, with: htmlString)
            }
        }
    }
    
    return newText
}

核心实现细节 #

1. CSS样式设计

   • 用.youtube-video-container做相对定位容器，让播放按钮能相对于预览图居中
   • 用::after伪元素生成播放按钮：直接嵌入SVG格式的图标（无需外部链接），设置白色填充、红色描边，透明度0.8保证不遮挡预览内容
   • pointer-events: none确保点击时直接触发下方的YouTube链接，不会被播放按钮元素拦截

2. HTML结构调整

   • 将原有的图片链接包裹在带样式的div容器中，确保CSS能正确作用到目标元素

3. 样式注入逻辑

   • 在文本开头添加内部样式表，且只添加一次，避免重复注入导致样式冲突

适配调整建议 #

• 可以修改播放按钮的width/height值调整大小，修改SVG的fill和stroke属性调整颜色
• 如果部分iOS版本对伪元素支持有限，可改用双图片叠加的方式：在容器中添加一个绝对定位的播放按钮图片，和预览图并列放置

内容的提问来源于stack exchange，提问作者Astro