कंटेनर की चौड़ाई चौड़ाई चारों ओर लपेटकर नहीं: ऑटो <video>

Question

शीर्षक राज्यों के रूप में, अगर मैं <video> लपेट 'एक <div> कंटेनर में है (आगे एक ओवरले जोड़ने के लिए) है, जो relative; inline-block; height:100%; के लिए निर्धारित है, जबकि <video> के आकार height:100%; width:auto है यह सब अच्छा है प्रारंभिक पृष्ठ प्रतिपादन पर, लेकिन जैसे ही आप पृष्ठ का आकार बदलते हैं, वीडियो कम हो जाते हैं/बढ़ते हैं, लेकिन कंटेनर की चौड़ाई वही बना रहता है।

यहां आपके लिए एक कोडपेन है: http://codepen.io/MaxYari/pen/PqeOQY
बस खिड़की की ऊंचाई बदलने की कोशिश करें और देखें कि मेरा क्या मतलब है।

दूसरे शब्दों में - मैं एक कंटेनर बनाना चाहता हूं जो <video> टैग के चारों ओर लपेटेगा, जो इसकी प्रकृति से इसके पहलू अनुपात को संरक्षित रखता है।
यह div-video निर्माण एक बड़ी कंटेनर-सूची में फिट होना चाहिए।
container-list अभिविन्यास के आधार पर, बड़ी तरफ से फ़िट करें। क्षैतिज के लिए iee height: 100%।
अलग CSS अलग-अलग उन्मुखताओं के लिए निश्चित रूप से बनाया जा सकता है, इसलिए मैं केवल एक मामले को हल करना चाहता हूं, मान लीजिए कि यह दोनों को हल करेगा।

संपादित करें: अद्यतन पेन और वीडियो रैपर को एक सीमा जोड़ा ताकि यह नॉनप्रैपनेस बेहतर तरीके से स्पष्ट हो सके।

Answer 1

Firefox में ऐसा लगता है कि तुम सिर्फ इसलिए की तरह display: inline-flex; करने के लिए display: inline-block; बदल सकता है ऐसा दिखाई देगा:

Example - गूगल क्रोम में काम नहीं करता; कुछ जावास्क्रिप्ट के साथ Multibrowser समाधान के लिए नीचे दिए गए

body, 
 
html { 
 
    height: 100%; 
 
} 
 
#videos { 
 
    position: relative; 
 
    height: 30%; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 
.video_wrapper { 
 
    height: 100%; 
 
    display: inline-flex; /* see change here */ 
 
} 
 
.video { 
 
    height: 100%; 
 
    width: auto; 
 
}

<div id="videos"> 
 
    <div class="video_wrapper"> 
 
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video> 
 
    </div> 
 
    <div class="video_wrapper"> 
 
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video> 
 
    </div> 
 
</div>

MDN Documentation

Can I use compatibility table

---

यह केवल जिस तरह से यह काम करने के लिए क्रोम के लिए है पाने के लिए की तरह लग रहा नीचे देखो force a repaint जब विंडो का आकार बदलता है:

Working Example

$(window).resize(function() { 
    $('.video_wrapper').hide().show(0); 
}); 

क्रोम, तरल पदार्थ वीडियो के साथ समस्या है लगता है लग रहा है यह object-fit property के साथ कुछ, सौभाग्य से आप उपरोक्त विधि के साथ आस-पास काम कर सकते हैं की तरह।

Answer 2

आप वीडियो आवरण

.video_wrapper { 
    height: 100%; 
    display: inline-block; 
} 

में किसी भी चौड़ाई निर्दिष्ट नहीं किया है इस तरह एक प्रतिशत चौड़ाई जोड़ें:

.video_wrapper { 
    width: 100%; 
    height: 100%; 
    display: inline-block; 
} 

Answer 3

असल में सिर्फ स्थापित करने .video आवरण यह है में रखने के लिए नहीं जा रहा है कंटेनर।

आपको शरीर, एचटीएमएल चयनकर्ताओं के लिए न्यूनतम चौड़ाई निर्धारित करने जा रहे हैं। एक तरल शरीर की चौड़ाई का उपयोग करें जो इसके कंटेनर से बचने का कारण बन रहा है।

इसलिए नए सीएसएस

body,html { 
    height: 100%; 
    min-width: 1024px; 
} 
#videos { 
    position: relative; 
    height: 30%; 
    background-color: rgba(0,0,0,0.8); 
} 
.video_wrapper { 
    height: 100%; 
    display: inline-block; 
} 
.video { 
    height: 100%; 
    width: auto; 
}