में पूर्ण-चौड़ाई पृष्ठभूमि वीडियो मैं ऐसी वेबसाइट तैयार कर रहा हूं जो एक 100% चौड़ाई कंटेनर में स्वयं-होस्टेड पृष्ठभूमि वीडियो का उपयोग करता हो। क्रोम और फ़ायरफ़ॉक्स में बेकार ढंग से काम करता है लेकिन आईई में खराब तरीके से विफल रहता है (आईई 11 में परीक्षण किया गया)।इंटरनेट एक्सप्लोरर
वीडियो को वीडियो अनुपात को बनाए रखने के लिए वीडियो को चौड़ाईवार तक फैलाया जाना चाहिए, हालांकि, आईई बस कंटेनर को लंबवत कंटेनर भरने के लिए आवश्यक आकार में कंटेनर में रखता है।
आप इस का उपयोग करें कर सकते हैं मैं यह काम करता है आशा है कि आप :)
This is html code :
<div class="video-frame">
<video class="video-box" autoplay poster="video-back.jpg" id="bgvid" loop>
<source src="sample.webm" type="video/webm">
<source src="sample.mp4" type="video/mp4">
</video>
</div>
This is css code :
.video-frame { position:relative;margin:40px auto;width:100%;}
.video-box { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('video-back.jpg') no-repeat; background-size: cover; transition: 1s opacity;}
/*you can use this css.*/
.fullwidth-video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
-webkit-transform-style: preserve-3d;
}
.fullwidth-video video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
height: auto;
width: 100%;
object-fit: cover;
}
एचटीएमएल कोड यहाँ ...
<div class="fullwidth-video">
<video preload="auto" autoplay loop muted="">
<source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4">
<source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.webm" type="video/webm">
</video>
</div>
हल
मैं IE में चौड़ाई के लिए एक ही मुद्दा था: समाधान मैंने पाया <video> टैग पर लागू अतिरिक्त कस्टम सीएसएस हटा रहा है।
इतना कोड काम करना चाहिए:
<!DOCTYPE html>
<html>
<body>
<video width="100%" height="" autoplay>
<source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>फिर
कोशिश एक मेटा जोड़ने अपने टैग के अंदर किसी भी अतिरिक्त वर्ग/शैली पर लागू/दूर करने की कोशिश एचटीएमएल पर हेड सेक्शन पर टैग करें .. <मेटा http-equiv = "एक्स-यूए-संगत" सामग्री = "आईई = एज" /> – yjs