HTML YouTube Videos का मतलब है YouTube पर hosted videos को web page में embed करना।
YouTube videos directly upload करने की बजाय iframe के ज़रिए page पर दिखाए जाते हैं।
यह तरीका fast, bandwidth-friendly और widely supported है।
YouTube Video Embed करने का Basic तरीका
YouTube वीडियो embed करने के लिए <iframe> element use होता है।
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>
यहाँ VIDEO_ID YouTube video का unique ID होता है।
YouTube Video ID कैसे निकालें?
YouTube URL इस तरह होता है:
https://www.youtube.com/watch?v=abc123XYZ
इसमें abc123XYZ video ID है।
Embed URL इस format में होता है:
https://www.youtube.com/embed/abc123XYZ
iframe Attributes
width iframe की चौड़ाई set करता हैheight iframe की ऊँचाई set करता हैsrc embedded video का URL होता हैtitle accessibility के लिए use होता हैallowfullscreen fullscreen option enable करता है
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/abc123XYZ"
title="YouTube video player"
allowfullscreen>
</iframe>
Autoplay YouTube Video
Autoplay के लिए autoplay=1 parameter add किया जाता है।
<iframe
src="https://www.youtube.com/embed/abc123XYZ?autoplay=1&mute=1">
</iframe>
Modern browsers में autoplay तभी काम करता है जब video muted हो।
Loop YouTube Video
Video को loop करने के लिए playlist parameter जरूरी होता है।
<iframe
src="https://www.youtube.com/embed/abc123XYZ?loop=1&playlist=abc123XYZ">
</iframe>
Controls Show या Hide करना
YouTube player controls को control किया जा सकता है।
<iframe
src="https://www.youtube.com/embed/abc123XYZ?controls=0">
</iframe>
controls=1 default होता है।
Start और End Time Set करना
Video को specific time से start या end कराया जा सकता है।
<iframe
src="https://www.youtube.com/embed/abc123XYZ?start=30&end=90">
</iframe>
Time seconds में होता है।
Responsive YouTube Video
Responsive design के लिए iframe को CSS से control किया जाता है।
<div class="video-container">
<iframe src="https://www.youtube.com/embed/abc123XYZ"></iframe>
</div>
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video-container iframe {
position: absolute;
width: 100%;
height: 100%;
}
यह mobile और desktop दोनों पर सही काम करता है।
Privacy Enhanced Mode
YouTube cookies avoid करने के लिए privacy-enhanced mode use किया जा सकता है।
<iframe
src="https://www.youtube-nocookie.com/embed/abc123XYZ">
</iframe>
यह GDPR और privacy compliance में helpful होता है।
YouTube Player API (Basic Idea)
Advanced control के लिए YouTube IFrame API use की जाती है।
<iframe id="player" src="https://www.youtube.com/embed/abc123XYZ"></iframe>
इससे play, pause, volume जैसे controls JavaScript से handle किए जा सकते हैं।
YouTube Videos और Accessibility
title attribute जरूर दें
Controls hide करने से बचें
Autoplay video avoid करें
User को full control दें
HTML YouTube Videos Best Practices
Responsive iframe use करें
Privacy-enhanced URL prefer करें
Unnecessary autoplay avoid करें
Multiple embedded videos limit रखें
HTML YouTube Videos Summary
YouTube videos iframe से embed किए जाते हैं
Upload की जरूरत नहीं होती
Parameters से behavior control किया जा सकता है
Responsive और privacy-friendly embedding best practice है