पृष्ठभूमि वीडियो जो हमेशा ब्राउज़र को फिट करने के लिए आकार बदलता है

मैं ऐसी वेबसाइट बनाने की कोशिश कर रहा हूं जिसमें पृष्ठभूमि एक वीडियो है। मैं कुछ दिनों के लिए खोज कर रहा हूं कि Spotify's होमपेज पृष्ठभूमि जैसे कुछ कैसे बनाया जाए, लेकिन यह काम नहीं कर रहा है।पृष्ठभूमि वीडियो जो हमेशा ब्राउज़र को फिट करने के लिए आकार बदलता है

मेरी समस्या यह है कि मैं या तो ब्राउजर, या चौड़ाई के साथ स्केल करने की ऊंचाई प्राप्त कर सकता हूं, लेकिन दोनों नहीं। Spotify की वेबसाइट पर वीडियो के विपरीत, यह हर समय ब्राउज़र फिट करने के लिए स्केल नहीं करता है। मैंने कई चीजों की कोशिश की है, और उनमें से ज्यादातर मुझे याद नहीं है। मुझे इस प्रभाव को प्राप्त करने के लिए JQuery का उपयोग करने पर कोई फर्क नहीं पड़ता।

मेरे वर्तमान कोड है:

<!DOCTYPE html> 
<html> 
<head> 
<title>VideoBG</title> 
<style type="text/css"> 


#videohome { 
    position:absolute; 
    height: 100%; 
    width: 100%; 

    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

</style> 
</head> 
<body> 


     <video id="videohome" preload="auto" autoplay="true" loop="loop" muted="" volume="0"> 
      <source src="./homepage.mp4" type="video/mp4" /> 
     </video> 


</body> 
</html>

स्रोत

2013-05-22 Lateral

jQuery के लिए BigVideo.js प्लगइन पर एक नज़र डालें: http://dfcb.github.io/BigVideo.js/ – reinder

मुझे स्पॉटिफी के मुखपृष्ठ पर कुछ वीडियो नहीं दिखते हैं, केवल कुछ प्रकार के लंबन स्क्रॉलिंग। – LeBen

@ लेबेन: यह केवल तब होता है जब आप पहली बार अपनी वेबसाइट पर जाते हैं। वह इस विशेष पृष्ठ पर प्रतिक्रिया दे रहा है: https://www.spotify.com/en/video-splash – reinder

आप एक कंटेनर div है, जो स्क्रीन के लिए फिट बैठता है है, और फिर वीडियो है जो यह चौड़ाई या ऊंचाई को आकार परिवर्तन करने के लिए एक वर्ग जोड़ने की आवश्यकता होगी।

सीएसएस:

.container { 
width: 100%; 
height: 100%; 
position: absolute; 
padding:0; 
margin:0; 
left: 0px; 
top: 0px; 
z-index: -1000; 
overflow:hidden; 
} 

.videoPlayer { 
    min-height: 100%; 
    //min-width:100%; - if fit to width 
position:absolute; 
bottom:0; 
left:0; 
}

HTML:

<div class="container"><video class="videoPlayer">Code goes here</video></div>

स्रोत

2013-05-22 09:22:32 cutoverRooster

Oldie लेकिन एक गोल्डी। इस के साथ संघर्ष कर रहे हैं लेकिन पाया कि पहलू अनुपात मीडिया प्रश्न अच्छी तरह से काम करते हैं।

यदि मीडिया प्रश्न समर्थित नहीं हैं, तो वीडियो अभी भी पृष्ठ को कवर करेगा लेकिन ठीक से स्केल नहीं करेगा।

यदि translateX, translateY या @supports समर्थित नहीं है, तो वीडियो केंद्रित नहीं होगा।

HTML:

<div class="cover"> 

    <video autoplay loop mute poster="path/to/image.jpg"> 
     <source src="path/to/video.mp4" type="video/mp4" /> 
     <source src="path/to/video.webm" type="video/webm" /> 
     <source src="path/to/video.ogv" type="video/ogg" /> 
     <img src="path/to/image.jpg" alt="" /> 
    </video> 

</div>

सीएसएस:

http://wesbos.com/css-object-fit/

उपयोग वस्तु फिट:

.cover { 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 1; 
} 

.cover img, .cover video { 
    display: block; 
    height: auto; 
    left: auto; 
    max-width: none; 
    min-height: 100%; 
    min-width: 100%; 
    right: auto; 
    position: absolute; 
    top: 0; 
    width: auto; 
    z-index: 1; 
} 

@supports (transform: translateX(-50%)) { 

    .cover img, .cover video { 
     left: 50%; 
     top: 50%; 
     transform: translateX(-50%) translateY(-50%); 
    } 

} 

@media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */ 

    .cover img, .cover video { 
     max-width: 100vw; 
     min-width: 100vw; 
     width: 100vw; 
    } 

} 

@media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */ 

    .cover img, .cover video { 
     height: 100vh; 
     max-height: 100vh; 
     min-height: 100vh; 
    } 

}

स्रोत

2017-10-27 12:50:35 shakyjake

मैं इस पाया कवर; आपके वीडियो टैग पर

यह मेरे लिए काम करता है।

स्रोत

2018-01-04 22:06:52

यह ध्यान दिया जाना चाहिए कि इस लेखन के समय के रूप में एज अभी भी पूरी तरह ऑब्जेक्ट-फिट का समर्थन नहीं करता है। यह केवल टैग पर इसका उपयोग करने का समर्थन करता है। https://caniuse.com/#search=objectfit –

उपर्युक्त टिप्पणी के अनुसार आईई और एज को छोड़कर वीडियो के सभी ब्राउज़रों में ऑब्जेक्ट-फिट काम करता है।आप इसे माइक्रोसॉफ्ट डेवलपर फोरम पर यहां वोट दे सकते हैं: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/32011258-object-fit-and-object-position-for- all-media-elem? category_id = 86947 इस दौरान एक जेएस पॉलीफिल का उपयोग करें, लेकिन अगर इसे अधिक वोट मिलते हैं तो इसे लागू किया जाएगा। –

पृष्ठभूमि वीडियो जो हमेशा ब्राउज़र को फिट करने के लिए आकार बदलता है

उत्तर

संबंधित मुद्दे