我之前正好碰到过完全一致的场景：用TYPO3 7.6搭了自定义图片画廊，配合fancyBox v3.0.47，原本图片展示一切正常。结果客户要求加YouTube视频，用「从URL添加媒体」导入后，视频被存成了.youtube格式的文件，死活拿不到真实播放链接或者视频ID，试了两种方法都踩坑了：

• 把<f:image>换成<f:media>：视频能正常播放，但完全触发不了fancyBox弹窗，等于脱离了画廊的交互逻辑
• 沿用原来的图片展示逻辑：点击预览图后，弹窗里只显示一串视频ID，根本没法看

需求很明确：点击视频预览图，在fancyBox弹窗里打开YouTube视频（还不能自动播放），而且优先只改模板，不想动后端逻辑。

折腾了半天终于找到关键：.youtube格式的文件里，{file.contents}字段就是我们要的视频ID！直接用它拼接YouTube的Embed链接，再给a标签加上fancyBox需要的属性就搞定了。

核心代码如下：

<f:if condition="{file.originalFile.properties.extension} == 'youtube'">
    <f:then>
        <a 
            href="https://www.youtube.com/embed/{file.contents}" 
            data-type="iframe" 
            data-fancybox="gallery" 
            data-caption="{file.description}"
        >
            <f:image image="{file}" />
        </a>
    </f:then>
</f:if>

代码细节说明： #

1. 后缀判断：先筛选出.youtube格式的媒体文件，完全不影响原有图片的展示逻辑
2. Embed链接拼接：用{file.contents}获取的视频ID拼接成YouTube Embed链接，这个链接默认不会自动播放，刚好符合需求
3. fancyBox属性配置：
   • data-type="iframe"：告诉fancyBox用iframe方式加载内容，适配YouTube的播放要求
   • data-fancybox="gallery"：把视频归到和图片同一个画廊组里，保持前后交互逻辑一致
   • data-caption="{file.description}"：绑定视频的描述作为弹窗标题，和图片的展示逻辑统一
4. 预览图展示：还是用<f:image>显示视频的预览图，保证画廊整体样式统一

如果需要调整弹窗的尺寸，还可以给a标签加上data-width和data-height属性，比如：

<a 
    href="https://www.youtube.com/embed/{file.contents}" 
    data-type="iframe" 
    data-fancybox="gallery" 
    data-caption="{file.description}"
    data-width="800"
    data-height="450"
>

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