कैसे बनाने के लिए उत्तरदायी या समायोज्य, पूर्ण चौड़ाई, यूट्यूब से एक वीडियो एम्बेडेड

अगर कभी डाला एक वीडियो के YouTube अपने कुछ वेबसाइट आपने देखा होगा कि वीडियो एक निश्चित चौड़ाई और यह नहीं है उत्तरदायी जब आप परिवर्तित करें आकार ब्राउज़र या जब आप दूसरों से अपने वेब पृष्ठों को देखने डिवाइसेज़ अलग स्क्रीन आकार के साथ (मोबाइल, गोलियाँ,…).

पिछले एक लेख में हमने देखा जैसा कि आप सीधे अपने वेब पेज में एक यूट्यूब वीडियो डालने सकता है, और अगर आप का उपयोग WordPress, बिना किसी भी प्रकार की प्लगइन.

करना है कि चौड़ाई की एक वीडियो डाला, कोड से HTML कि यूट्यूब अमेरिका दा, है उत्तरदायी, पहली बात हम क्या करेंगे एक के अंदर इस कोड डाल दिया है DIV.

<div class="contenedor">
   <iframe src="https://www.youtube.com/embed/NUsoVlDFqZg" 
           frameborder="0" 
           allowfullscreen="allowfullscreen" 
           class="video">
   </iframe>
</div>

frameborder="0"

allowfullscreen="allowfullscreen"

class="video">

</iframe>

</div>

आप का उपयोग कर सकते हैं कोड यहां दिखाया, और बदलें को मार्ग मार्ग है कि आप देने के साथ YouTube वीडियो जिसे आप चाहते है सम्मिलित करें. कृपया ध्यान दें कि आप वर्ग आवंटित करना चाहिए वीडियो तत्व को iframe.

उसके बाद, अपनी फ़ाइल में सीएसएस इसी, या सीधे किसी तत्व पर शैली एक ही पृष्ठ पर, हम करने के लिए जा रहे हैं शैली विशेषताएं असाइन करें वर्ग के लिए कंटेनर और वीडियो.

.contenedor {
   position: relative;
   height: 0px;
   width: 100%;   
   padding-bottom: 56.25%;
}

.video {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.contenedor {

position: relative;

height: 0px;

width: 100%;

padding-bottom: 56.25%;

}

.video {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

एक बार यह कोड दर्ज किया गया है, अगर ताज़ा फिर से पृष्ठ जहां आप वीडियो डाला, जांच अब यह समायोजित करने के लिए चौड़ाई के DIV इसमें. हाँ पूर्व DIV सीधे ऊपर स्थित है शरीर, आप देखेंगे कि यह रीसेट करने के लिए स्क्रीन की चौड़ाई.