Josh Knapp
b511a6684d
Includes new page templates (fitness-gym, nonprofit, online-course, photography-studio, real-estate, startup-company, travel-blog, wedding-invitation) with thumbnail SVGs, test specs, documentation files, and minor updates to index.html, router.php, and playwright config. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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>
|