मूल रूप से मैं जो हासिल करने की कोशिश कर रहा हूं वह एक वीडियो हैयह एक div भरता है, तो जब विंडो का आकार मोबाइल से कम हो जाता है तो यह div में छोटे आकार का हो जाता है। हालाँकि, मूल वीडियो div से बड़ा है, इसलिए मुझे इसका आकार बदलने की आवश्यकता है। अगर मैं वीडियो को 100% चौड़ाई पर डालता हूं तो यह छोटे वीडियो को प्रभावित करता है, इसलिए विंडो बंद होने पर यह t "स्विच नहीं करता है, इसलिए मुझे लगता है कि मुझे वीडियो पर अधिकतम चौड़ाई की आवश्यकता है? लेकिन ive ने इसे आज़माया और इसका आकार नहीं बदल रहा है? सब।
मेरी संरचना है
Im html / css में सुपर एडवांस नहीं है फिर भी कृपया इसे बेसिक रखें :)
बहुत धन्यवाद।
<div id="video_1">
<video id="myvideo"controls >
<source src="video/small.mp4" type="video/mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)">
<source src="video/small.webm" type="video/webm" media="all and (max-width: 480px), all and (max-device-width: 480px)">
<source src="video/small.ogv" type="video/ogg" media="all and (max-width: 480px), all and (max-device-width: 480px)">
<source src="video/large.mp4" type="video/mp4">
<source src="video/large.webm" type="video/webm">
<source src="video/large.ogv" type="video/ogg">
fallback here
</video>
</div>
उत्तर:
जवाब के लिए 0 № 1कोड का यह टुकड़ा आपके वीडियो को अनुपात में रखेगा और उसी के अनुसार स्केल करेगा।
अपने वीडियो को एक कंटेनर div के अंदर रखना सुनिश्चित करें।
HTML:
<div id="container">
<video id="video" autoplay loop>
<source src="backgroundmovie.webm" type="video/webm" />
<source src="backgroundmovie.mp4" type="video/mp4" />
</video>
</div>
सीएसएस:
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
}
यदि आप इसे उत्तरदायी बनाना चाहते हैं, तो एक मीडिया जोड़ेंक्वेरी करें और जो भी आपको पसंद हो उसका वीडियो सेट करें। यह ब्राउजर के छोटा होने पर वीडियो ऑटोमैटिक रूप से पैरेंट कंटेनर की 100% ऊंचाई / चौड़ाई पर कूद जाएगा।