<devsite-video> कस्टम एलिमेंट का इस्तेमाल करके, YouTube वीडियो को सीधे DevSite के पेजों में जोड़ा जा सकता है. सभी वीडियो रिस्पॉन्सिव होते हैं और व्यूपोर्ट की चौड़ाई में बदलाव होने पर, 16:9 का आसपेक्ट रेशियो बनाए रखते हैं.
YouTube वीडियो एम्बेड करने के लिए, अपने पेज में <devsite-video> कस्टम एलिमेंट जोड़ें. साथ ही, वीडियो के लिए video-id एट्रिब्यूट को v यूआरएल पैरामीटर की वैल्यू पर सेट करें.
उदाहरण के लिए, https://www.youtube.com/watch?v=Pgfbl_o9WvM पर मौजूद YouTube वीडियो "आपकी पहली स्क्रिप्ट - Apps Script ट्यूटोरियल" को एम्बेड करने के लिए, अपने DevSite पेज में यह <devsite-video> कस्टम एलिमेंट जोड़ें:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
इसके बाद, <devsite-video> कस्टम एलिमेंट को <div> एलिमेंट में रैप करें, जिसका class एट्रिब्यूट इनमें से किसी एक वैल्यू पर सेट हो:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
डिफ़ॉल्ट
यहां दिए गए उदाहरण में दिखाया गया है कि जब <devsite-video> को <div> एलिमेंट में रैप किया जाता है और class एट्रिब्यूट को video-wrapper पर सेट किया जाता है, तो एम्बेड किया गया YouTube वीडियो कैसे दिखता है.
बड़ी स्क्रीन पर, वीडियो कॉन्टेंट एरिया की चौड़ाई का 50% होता है. साथ ही, यह वीडियो से पहले मौजूद कॉन्टेंट की दाईं ओर फ़्लोट करता है. छोटी स्क्रीन पर, वीडियो कॉन्टेंट एरिया की चौड़ाई का 100% होता है.
कोड
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
डेमो
बाईं ओर फ़्लोट किया गया
यहां दिए गए उदाहरण में दिखाया गया है कि जब <devsite-video> को <div> एलिमेंट में रैप किया जाता है और उसके क्लास एट्रिब्यूट को video-wrapper-left पर सेट किया जाता है, तो एम्बेड किया गया YouTube वीडियो कैसे दिखता है.
बड़ी स्क्रीन पर, वीडियो कॉन्टेंट एरिया की चौड़ाई का 50% होता है. साथ ही, वीडियो उस कॉन्टेंट की बाईं ओर फ़्लोट करता है जो वीडियो से पहले दिखता है. छोटी स्क्रीन पर, वीडियो कॉन्टेंट एरिया की चौड़ाई का 100% होता है.
कोड
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
डेमो
पूर्ण-चौड़ाई
यहां दिए गए उदाहरण में दिखाया गया है कि जब <devsite-video> को <div> एलिमेंट में रैप किया जाता है और class एट्रिब्यूट को video-wrapper-full-width पर सेट किया जाता है, तो एम्बेड किया गया YouTube वीडियो कैसे दिखता है.
वीडियो, कॉन्टेंट एरिया की चौड़ाई का 100% हिस्सा है. साथ ही, वीडियो से पहले मौजूद किसी भी कॉन्टेंट के लेआउट पर इसका कोई असर नहीं पड़ता.
कोड
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
डेमो
नोट
कोड के सभी उदाहरणों में, DevSite के YouTube विजेट को एम्बेड करने की सुविधा का इस्तेमाल किया गया है. यह सुविधा, Google Analytics के डेटा को अपने-आप ट्रैक करती है. अगर आपको एम्बेड किए गए वीडियो के इस्तेमाल के आंकड़े इकट्ठा नहीं करने हैं, तो इस विजेट का इस्तेमाल करें. इसके बिना, आपके वीडियो के इस्तेमाल के आंकड़े Analytics को नहीं भेजे जाएंगे.