252 lines
9.1 KiB
HTML
252 lines
9.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>YouTube Embed Test - Error 153 Debugging</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #1a1a2e;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
color: #60a5fa;
|
|||
|
|
}
|
|||
|
|
.test-section {
|
|||
|
|
background: #2d2d44;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.video-container {
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: 56.25%;
|
|||
|
|
height: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
max-width: 100%;
|
|||
|
|
background: #000;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
.video-container iframe {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
code {
|
|||
|
|
background: #1a1a2e;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
color: #10b981;
|
|||
|
|
}
|
|||
|
|
.status {
|
|||
|
|
padding: 10px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.success {
|
|||
|
|
background: #065f46;
|
|||
|
|
border: 1px solid #10b981;
|
|||
|
|
}
|
|||
|
|
.error {
|
|||
|
|
background: #7f1d1d;
|
|||
|
|
border: 1px solid #ef4444;
|
|||
|
|
}
|
|||
|
|
.info {
|
|||
|
|
background: #1e3a8a;
|
|||
|
|
border: 1px solid #3b82f6;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>🎥 YouTube Embed Test - Error 153 Debugging</h1>
|
|||
|
|
|
|||
|
|
<div class="status info">
|
|||
|
|
<strong>Purpose:</strong> Test if YouTube Error 153 is caused by our embed code or the video itself.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Test 1: Our minimal embed URL -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>Test 1: Our Site Builder Embed (Minimal)</h2>
|
|||
|
|
<p><strong>Embed URL:</strong> <code>https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0</code></p>
|
|||
|
|
<p><strong>Parameters:</strong> Only <code>rel=0</code> (no related videos)</p>
|
|||
|
|
<p><strong>Allow attribute:</strong> No autoplay</p>
|
|||
|
|
|
|||
|
|
<div class="video-container">
|
|||
|
|
<iframe
|
|||
|
|
src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0"
|
|||
|
|
title="Test 1: Minimal Embed"
|
|||
|
|
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|||
|
|
allowfullscreen>
|
|||
|
|
</iframe>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="status" id="test1-status">
|
|||
|
|
⏳ Loading... If you see the video player, it works! If you see Error 153, read below.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Test 2: YouTube's default embed -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>Test 2: YouTube Default Embed</h2>
|
|||
|
|
<p><strong>Embed URL:</strong> <code>https://www.youtube.com/embed/dQw4w9WgXcQ</code></p>
|
|||
|
|
<p><strong>Parameters:</strong> None (absolute minimum)</p>
|
|||
|
|
|
|||
|
|
<div class="video-container">
|
|||
|
|
<iframe
|
|||
|
|
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
|
|||
|
|
title="Test 2: Default Embed"
|
|||
|
|
allowfullscreen>
|
|||
|
|
</iframe>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="status" id="test2-status">
|
|||
|
|
⏳ Loading... This is the most basic embed possible.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Test 3: Alternative test video -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>Test 3: Alternative Video (Me at the zoo)</h2>
|
|||
|
|
<p><strong>Video:</strong> First ever YouTube video (should always work)</p>
|
|||
|
|
<p><strong>Embed URL:</strong> <code>https://www.youtube.com/embed/jNQXAC9IVRw?rel=0</code></p>
|
|||
|
|
|
|||
|
|
<div class="video-container">
|
|||
|
|
<iframe
|
|||
|
|
src="https://www.youtube.com/embed/jNQXAC9IVRw?rel=0"
|
|||
|
|
title="Test 3: Me at the zoo"
|
|||
|
|
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|||
|
|
allowfullscreen>
|
|||
|
|
</iframe>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="status" id="test3-status">
|
|||
|
|
⏳ Loading... Historic video with no restrictions.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Results interpretation -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>📊 How to Interpret Results</h2>
|
|||
|
|
|
|||
|
|
<div class="status success">
|
|||
|
|
<strong>✅ If all videos work:</strong><br>
|
|||
|
|
Great! The issue was with the specific video you were trying to use. Our embed code is correct.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="status error">
|
|||
|
|
<strong>❌ If you see Error 153 on Test 1 & 2 but NOT Test 3:</strong><br>
|
|||
|
|
The "Never Gonna Give You Up" video has embedding restrictions. Use Test 3 video or your own videos instead.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="status error">
|
|||
|
|
<strong>❌ If you see Error 153 on ALL tests:</strong><br>
|
|||
|
|
Possible causes:
|
|||
|
|
<ul>
|
|||
|
|
<li>Your network/ISP is blocking YouTube embeds</li>
|
|||
|
|
<li>Browser extension (ad blocker) is interfering</li>
|
|||
|
|
<li>Corporate firewall restrictions</li>
|
|||
|
|
<li>YouTube regional restrictions</li>
|
|||
|
|
</ul>
|
|||
|
|
<strong>Try:</strong>
|
|||
|
|
<ul>
|
|||
|
|
<li>Disable browser extensions</li>
|
|||
|
|
<li>Try a different browser</li>
|
|||
|
|
<li>Try from a different network</li>
|
|||
|
|
<li>Use direct .mp4 files instead</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="status info">
|
|||
|
|
<strong>ℹ️ About Error 153:</strong><br>
|
|||
|
|
Error 153 = "The owner of the requested video does not allow it to be played in embedded players."
|
|||
|
|
<br><br>
|
|||
|
|
This is a <strong>YouTube content protection feature</strong>, not a bug in our code. Video owners can:
|
|||
|
|
<ul>
|
|||
|
|
<li>Disable embedding completely</li>
|
|||
|
|
<li>Disable autoplay embedding</li>
|
|||
|
|
<li>Restrict embedding to certain domains</li>
|
|||
|
|
<li>Set regional restrictions</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Direct embed URL test -->
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>🔗 Test Your Own Video</h2>
|
|||
|
|
<p>Enter a YouTube URL to test if it allows embedding:</p>
|
|||
|
|
<input type="text" id="custom-url" placeholder="https://www.youtube.com/watch?v=..."
|
|||
|
|
style="width: 100%; padding: 10px; font-size: 14px; background: #1a1a2e; border: 1px solid #3b82f6; color: #fff; border-radius: 4px;">
|
|||
|
|
<button onclick="testCustomVideo()"
|
|||
|
|
style="margin-top: 10px; padding: 10px 20px; background: #3b82f6; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">
|
|||
|
|
Test This Video
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div id="custom-test" style="display:none; margin-top: 20px;">
|
|||
|
|
<div class="video-container" id="custom-container"></div>
|
|||
|
|
<div class="status info" id="custom-status"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function testCustomVideo() {
|
|||
|
|
const url = document.getElementById('custom-url').value.trim();
|
|||
|
|
if (!url) {
|
|||
|
|
alert('Please enter a YouTube URL');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Extract video ID
|
|||
|
|
const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
|
|||
|
|
if (!match) {
|
|||
|
|
alert('Invalid YouTube URL. Format: https://www.youtube.com/watch?v=VIDEO_ID');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const videoId = match[1];
|
|||
|
|
const embedUrl = `https://www.youtube.com/embed/${videoId}?rel=0`;
|
|||
|
|
|
|||
|
|
// Show test container
|
|||
|
|
document.getElementById('custom-test').style.display = 'block';
|
|||
|
|
|
|||
|
|
// Create iframe
|
|||
|
|
const container = document.getElementById('custom-container');
|
|||
|
|
container.innerHTML = `
|
|||
|
|
<iframe
|
|||
|
|
src="${embedUrl}"
|
|||
|
|
title="Custom Video Test"
|
|||
|
|
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|||
|
|
allowfullscreen>
|
|||
|
|
</iframe>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Update status
|
|||
|
|
document.getElementById('custom-status').innerHTML = `
|
|||
|
|
<strong>Testing:</strong> ${embedUrl}<br>
|
|||
|
|
If you see Error 153, this video doesn't allow embedding.
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Auto-detect errors
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const iframes = document.querySelectorAll('iframe');
|
|||
|
|
iframes.forEach((iframe, index) => {
|
|||
|
|
iframe.addEventListener('load', () => {
|
|||
|
|
console.log(`Iframe ${index + 1} loaded successfully`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
iframe.addEventListener('error', (e) => {
|
|||
|
|
console.error(`Iframe ${index + 1} error:`, e);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|