如何在Laravel Blade中不使用iframe嵌入YouTube视频

你使用的Embed包本质上还是生成iframe标签，所以检查元素时依然会看到它。要解决iframe导致的页面加载缓慢问题，核心思路是延迟加载视频资源——即初始只加载轻量的预览内容，在用户触发交互后再加载实际的视频播放组件。下面提供两种可行的实现方案：

方案一：原生JS实现缩略图触发延迟加载iframe #

这个方案先加载YouTube视频的缩略图，只有用户点击后才生成并加载iframe，避免初始页面加载多个iframe资源。

步骤1：添加提取YouTube视频ID的辅助函数 #

在Laravel项目中创建一个辅助函数（例如app/Helpers/YouTubeHelper.php），用于从视频链接中提取唯一ID：

<?php

function get_youtube_video_id($url) {
    preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $url, $matches);
    return isset($matches[1]) ? $matches[1] : null;
}

记得在composer.json中注册辅助函数，执行composer dump-autoload生效。

步骤2：Blade模板与前端交互代码 #

@foreach($video_for_homepage as $data)
    <center>
        <div class="owl-item" style="width: 100%;">                
            <div class="quote-body">
                @php
                    $videoId = get_youtube_video_id($data->links);
                @endphp
                @if($videoId)
                    <div class="youtube-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
                        <img 
                            src="https://img.youtube.com/vi/{{ $videoId }}/hqdefault.jpg" 
                            alt="YouTube视频缩略图"
                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;"
                            class="youtube-thumbnail"
                            data-video-id="{{ $videoId }}"
                        >
                        <div class="youtube-play-button" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(0,0,0,0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <span style="color: white; font-size: 30px;">▶</span>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </center>
@endforeach

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const thumbnails = document.querySelectorAll('.youtube-thumbnail');
        
        thumbnails.forEach(thumbnail => {
            thumbnail.addEventListener('click', function() {
                const videoId = this.dataset.videoId;
                const container = this.parentElement;
                
                // 生成并插入iframe，仅点击后加载视频资源
                const iframe = document.createElement('iframe');
                iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
                iframe.frameBorder = 0;
                iframe.allow = "autoplay; encrypted-media";
                iframe.allowFullscreen = true;
                iframe.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;';
                
                container.innerHTML = '';
                container.appendChild(iframe);
            });
        });
    });
</script>

方案二：使用YouTube IFrame API实现可控播放 #

如果需要更灵活的视频控制（比如自定义播放、暂停、音量调整），可以使用YouTube官方的IFrame API，同样实现延迟加载逻辑。

步骤1：引入API脚本 #

在Blade模板的<head>或页面底部添加API脚本：

<script src="https://www.youtube.com/iframe_api"></script>

步骤2：Blade模板与API交互代码 #

@foreach($video_for_homepage as $data)
    <center>
        <div class="owl-item" style="width: 100%;">                
            <div class="quote-body">
                @php
                    $videoId = get_youtube_video_id($data->links);
                @endphp
                @if($videoId)
                    <div class="youtube-player" id="player-{{ $loop->index }}" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
                        <img 
                            src="https://img.youtube.com/vi/{{ $videoId }}/hqdefault.jpg" 
                            alt="YouTube视频缩略图"
                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;"
                            class="youtube-thumbnail"
                            data-video-id="{{ $videoId }}"
                            data-player-id="{{ $loop->index }}"
                        >
                        <div class="youtube-play-button" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(0,0,0,0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <span style="color: white; font-size: 30px;">▶</span>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </center>
@endforeach

<script>
    let players = [];

    // API加载完成后的回调函数
    function onYouTubeIframeAPIReady() {}

    document.addEventListener('DOMContentLoaded', function() {
        const thumbnails = document.querySelectorAll('.youtube-thumbnail');
        
        thumbnails.forEach(thumbnail => {
            thumbnail.addEventListener('click', function() {
                const videoId = this.dataset.videoId;
                const playerId = this.dataset.playerId;
                const container = this.parentElement;
                
                // 初始化播放器并自动播放
                players[playerId] = new YT.Player(`player-${playerId}`, {
                    height: '100%',
                    width: '100%',
                    videoId: videoId,
                    events: {
                        'onReady': function(event) {
                            event.target.playVideo();
                        }
                    }
                });
                
                // 移除缩略图和播放按钮
                container.innerHTML = '';
            });
        });
    });
</script>

核心逻辑说明 #

两种方案都是通过初始加载轻量缩略图替代直接渲染iframe，只有当用户主动点击播放时才加载视频资源，从根源上减少了页面初始加载时的HTTP请求和资源占用，解决iframe导致的加载缓慢问题。

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