Symfony框架下禁用嵌入YouTube视频加载的Google Fonts

可行解决方案 #

方案1：本地代理iframe内容（推荐） #

通过Symfony控制器做YouTube视频的代理，过滤掉页面中加载Google Fonts的代码：

1. 创建代理控制器

// src/Controller/YouTubeProxyController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

class YouTubeProxyController extends AbstractController
{
    public function index(Request $request): Response
    {
        $videoId = $request->query->get('v');
        if (!$videoId) {
            return new Response('无效视频ID', 400);
        }

        // 获取YouTube嵌入页内容
        $youtubeUrl = "https://www.youtube.com/embed/{$videoId}";
        $content = file_get_contents($youtubeUrl);

        // 移除加载Google Fonts的链接和@import规则
        $filteredContent = preg_replace('/<link[^>]+fonts\.googleapis\.com[^>]+>/i', '', $content);
        $filteredContent = preg_replace('/@import[^;]+fonts\.googleapis\.com[^;]+;/i', '', $filteredContent);

        return new Response($filteredContent, 200, [
            'Content-Type' => 'text/html',
        ]);
    }
}

2. 配置路由

# config/routes.yaml
youtube_proxy:
    path: /youtube-proxy
    controller: App\Controller\YouTubeProxyController::index

3. 页面中替换原iframe链接

<iframe src="{{ path('youtube_proxy', {'v': '你的视频ID'}) }}" frameborder="0" allowfullscreen></iframe>

方案2：JavaScript拦截请求 #

通过JS监听iframe内的资源请求，阻止Google Fonts加载：

<iframe id="youtube-video" src="https://www.youtube.com/embed/你的视频ID" frameborder="0" allowfullscreen></iframe>

<script>
document.getElementById('youtube-video').addEventListener('load', function() {
    const iframeDoc = this.contentDocument || this.contentWindow.document;
    // 移除已加载的字体链接
    const fontLinks = iframeDoc.querySelectorAll('link[href*="fonts.googleapis.com"]');
    fontLinks.forEach(link => link.remove());
    
    // 拦截后续字体请求
    const originalFetch = iframeDoc.defaultView.fetch;
    iframeDoc.defaultView.fetch = function(url) {
        if (url.includes('fonts.googleapis.com')) {
            return Promise.resolve(new Response('', {status: 200}));
        }
        return originalFetch.apply(this, arguments);
    };
});
</script>

注意：受浏览器同源策略限制，可能需要给iframe配置合适的sandbox权限。

方案3：嵌入参数优化（简便但效果不稳定） #

添加特定嵌入参数尝试减少额外资源加载，无法保证完全阻止Google Fonts，但可作为辅助手段：

<iframe src="https://www.youtube.com/embed/你的视频ID?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>

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