``` YouTube链接自动转播放器 YouTube链接自动转播放器演示 这个页面演示了如何使用JavaScript自动将YouTube链接转换为内嵌播放器。 下面的链接会被JavaScript自动检测并转换为播放器: https://www.youtube.com/watch?v=M6AojAbC7XE 实现原理 JavaScript代码会自动检测页面中的YouTube链接,提取视频ID,然后创建一个嵌入播放器。 // 获取所有YouTube链接 const youtubeLinks = document.querySelectorAll('a.youtube-link'); // 遍历每个链接 youtubeLinks.forEach(link => { // 提取视频ID const videoId = extractYouTubeId(link.href); if (videoId) { // 创建播放器 const player = createYouTubePlayer(videoId); // 在链接后面插入播放器 link.parentNode.insertBefore(player, link.nextSibling); } }); 注意:这个演示使用了固定的YouTube链接。在实际应用中,您可以将任何YouTube链接添加到页面中,只要它们有"youtube-link"类名,就会被自动转换。 ``` Loading... ``` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YouTube链接自动转播放器</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; color: #333; } .container { background: white; border-radius: 10px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #FF0000; text-align: center; margin-bottom: 30px; font-size: 2.5rem; } .description { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #FF0000; } .youtube-link { display: inline-block; padding: 12px 20px; background-color: #FF0000; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; margin: 20px 0; transition: all 0.3s ease; } .youtube-link:hover { background-color: #CC0000; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(255,0,0,0.3); } .player-container { margin: 30px 0; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2); background-color: #000; } .player-container iframe { width: 100%; height: 500px; border: none; display: block; } .info-box { background-color: #e8f4fd; border: 1px solid #bee5eb; padding: 15px; border-radius: 5px; margin-top: 20px; } .info-box h3 { margin-top: 0; color: #0c5460; } .code-block { background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 15px; border-radius: 5px; font-family: monospace; overflow-x: auto; margin: 15px 0; } .note { font-style: italic; color: #6c757d; margin-top: 10px; } @media (max-width: 768px) { .player-container iframe { height: 300px; } h1 { font-size: 2rem; } } </style> </head> <body> <div class="container"> <h1>YouTube链接自动转播放器演示</h1> <div class="description"> <p>这个页面演示了如何使用JavaScript自动将YouTube链接转换为内嵌播放器。</p> <p>下面的链接会被JavaScript自动检测并转换为播放器:</p> </div> <!-- 这是我们要转换的YouTube链接 --> <a href="https://www.youtube.com/watch?v=M6AojAbC7XE" class="youtube-link"> https://www.youtube.com/watch?v=M6AojAbC7XE </a> <!-- 播放器将在这里自动插入 --> <div id="player-container"></div> <div class="info-box"> <h3>实现原理</h3> <p>JavaScript代码会自动检测页面中的YouTube链接,提取视频ID,然后创建一个嵌入播放器。</p> <div class="code-block"> // 获取所有YouTube链接<br> const youtubeLinks = document.querySelectorAll('a.youtube-link');<br><br> // 遍历每个链接<br> youtubeLinks.forEach(link => {<br> // 提取视频ID<br> const videoId = extractYouTubeId(link.href);<br><br> if (videoId) {<br> // 创建播放器<br> const player = createYouTubePlayer(videoId);<br><br> // 在链接后面插入播放器<br> link.parentNode.insertBefore(player, link.nextSibling);<br> }<br> }); </div> <p class="note">注意:这个演示使用了固定的YouTube链接。在实际应用中,您可以将任何YouTube链接添加到页面中,只要它们有"youtube-link"类名,就会被自动转换。</p> </div> </div> <script> // 等待页面加载完成 document.addEventListener('DOMContentLoaded', function() { // 获取所有带有youtube-link类的链接 const youtubeLinks = document.querySelectorAll('a.youtube-link'); // 遍历每个链接 youtubeLinks.forEach(link => { // 提取YouTube视频ID const videoId = extractYouTubeId(link.href); if (videoId) { // 创建YouTube播放器 const player = createYouTubePlayer(videoId); // 在链接后面插入播放器 link.parentNode.insertBefore(player, link.nextSibling); // 可选:隐藏原始链接 // link.style.display = 'none'; } }); }); // 提取YouTube视频ID的函数 function extractYouTubeId(url) { // 支持多种YouTube URL格式 const regex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/; const match = url.match(regex); return match ? match[1] : null; } // 创建YouTube播放器的函数 function createYouTubePlayer(videoId) { // 创建播放器容器 const container = document.createElement('div'); container.className = 'player-container'; // 创建iframe元素 const iframe = document.createElement('iframe'); iframe.src = `https://www.youtube.com/embed/${videoId}`; iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'; iframe.allowFullscreen = true; // 将iframe添加到容器中 container.appendChild(iframe); return container; } </script> </body> </html> ``` [AD]【腾讯云】年度爆款2核2G4M云服务器118元/年,新老用户同享 最后修改:2025 年 09 月 20 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏