HTML के पहले कदम - पाठ 7 - object टैग। YouTube से वीडियो सम्मिलित करना।

अक्सर हमें अपने ब्लॉग या वेबसाइट में YouTube से वीडियो एम्बेड करने की आवश्यकता होती है। इस पाठ में हम देखेंगे कि इसके लिए कौन से टैग और उनके गुण (attributes) उपयोग किए जाते हैं। सबसे पहले, चलिए YouTube पर चलते हैं और किसी वीडियो का कोड कॉपी करते हैं।

हमें कुछ इस तरह का कोड मिलता है:

<object style="height: 390px; width: 640px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>

जैसा कि आप देख सकते हैं, वीडियो को एम्बेड करने के लिए <object> टैग का उपयोग किया गया है। इस टैग में style गुण भी शामिल है। यह गुण सभी HTML टैग्स के लिए सार्वभौमिक होता है और इसके अंदर CSS स्टाइल्स लिखे जाते हैं। हम बाद में CSS को विस्तार से सीखेंगे, लेकिन फिलहाल इतना जानना पर्याप्त है कि CSS स्टाइल्स को सेमीकोलन (;) द्वारा अलग किया जाता है।

यहाँ height और width गुण हैं — यानी ऊँचाई और चौड़ाई। इन्हें हम अपनी आवश्यकता के अनुसार बदल सकते हैं। उदाहरण के लिए, यदि हम ऐसा लिखें:

<object style="height: 195px; width: 320px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>

तो YouTube प्लेयर का आकार आधा हो जाएगा। साथ ही, आपको embed टैग में भी width और height मान बदलने होंगे, ताकि वीडियो उसी अनुपात में छोटा दिखे:

<object style="height: 195px; width: 320px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="320" height="180">
</object>

object टैग के अंदर <param> टैग्स भी शामिल होते हैं। ये टैग्स एम्बेड किए गए ऑब्जेक्ट की सेटिंग्स या गुण निर्धारित करते हैं। उदाहरण के लिए:

• movie — यह दर्शाता है कि ऑब्जेक्ट एक वीडियो है, और उसके value गुण में उस वीडियो का URL दिया जाता है।
• allowFullScreen — पूर्ण-स्क्रीन मोड की अनुमति देता है। यदि आप चाहते हैं कि पूर्ण-स्क्रीन मोड निष्क्रिय हो, तो value="false" सेट कर सकते हैं।
• allowScriptAccess — वीडियो प्लेयर के API के साथ इंटरैक्शन के लिए आवश्यक होता है।