ब्लैक बॉर्डर के बिना पूर्णस्क्रीन वीडियो

Question

मेरी समस्या यह है कि वीडियो हमेशा स्क्रीन आकार के आधार पर किनारे पर या शीर्ष/नीचे पर काले सलाखों को प्राप्त करता है।

किसी भी विचार है कि यह कैसे है कि कष्टप्रद काले बार बिना दिखाए हमेशा पूर्ण स्क्रीन पाने के लिए? और प्लगइन का उपयोग किए बिना।

<div id="full-bg"> 
     <div class="box iframe-box" width="1280" height="800"> 
      <iframe src="http://player.vimeo.com/video/67794477?title=0&amp;byline=0&amp;portrait=0&amp;color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </div> 
    </div> 

#full-bg{ 
     width: 100%; 
     height: 100%; 
     img{ 
      display: none; 
     } 
     .iframe-box{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      background: url(../img/fittobox.png); 
      left: 0 !important; 
      top: 0 !important; 
      iframe{ 
       width: 100%; 
       height: 100%; 
      } 
     } 
    } 

Answer 1

अपने सीएसएस को जोड़ने का प्रयास करें

.iframe-box { 
    max-width: 1280px; /* video width */ 
    max-height: 720px; /* video height */ 
} 

इसका मतलब है कि width: 100%; height: 100% तत्व क्रमश यह कर सकते हैं जितना विस्तार होगा, जब तक यह अधिकतम ऊंचाई या 720px या 1280px की चौड़ाई मारता है, करने देगा।

यदि आप इसे देख रहे स्क्रीन पर अधिक रिज़ॉल्यूशन है, तो नोड विस्तार करना बंद कर देगा और आपके पास काले सीमाएं नहीं होंगी।

---

आगे, निम्नलिखित में से कोई वैध सीएसएस नहीं है, क्या आप लाइब्रेरी या कुछ का उपयोग कर रहे हैं?

#full-bg { 
    .iframe-box { 
     foo: bar; 
    } 
} 

---

संपादित करने के बाद जवाब स्वीकार किए जाते हैं: मैं सिर्फ इस लक्ष्य को हासिल करने के लिए एक पूरी तरह से अलग तरह से के बारे में सोचा है, लेकिन यह अपने सीएसएस का एक बहुत बदलने के लिए

.fittobox {    /* give fit to box an aspect ratio */ 
    display: inline-block; /* let it be styled thusly */ 
    padding: 0;   /* get rid of pre-styling */ 
    margin: 0; 
    width: 100%;   /* take up full width available */ 
    padding-top: 56.25%; /* give aspect ratio of 16:9; "720/1280 = 0.5625" */ 
    height: 0px;   /* don't want it to expand beyond padding */ 
    position: relative; /* allow for absolute positioning of child elements */ 
} 

.fittobox > iframe { 
    position: absolute; /* expand to fill */ 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 

Answer 2

आप अपने वीडियो के पहलू अनुपात पता है, तुम भी जावास्क्रिप्ट आवश्यकता नहीं होनी चाहिए:

यह मेरा मार्कअप है। आप प्रतिशत-आधारित padding-top का उपयोग कर सकते हैं।

मैं कोड पोस्ट कर सकता हूं, लेकिन मैं आपको this entire article वैसे भी पढ़ने की सलाह दूंगा।