उत्तरदायी पूर्णस्क्रीन यूट्यूब वीडियो बिना काले सलाखों के?

Question

मेरे पास मेरी वेबसाइट पर एक पूर्णस्क्रीन यूट्यूब वीडियो है।

यह अच्छा लग रहा है जब ब्राउज़र का आकार वीडियो के चौड़ाई और ऊंचाई के लिए आनुपातिक है। हालांकि, जब मैं ब्राउज़र को एक अलग अनुपात में बदलता हूं, तो मुझे वीडियो के चारों ओर काले सलाखों मिलते हैं।

मैं क्या चाहता हूँ वीडियो हर समय पूरे खिड़की भरने के लिए है, लेकिन किसी भी अधिक समय दिए बिना। मैं "अतिरिक्त" को छिपाना चाहता हूं जब ब्राउज़र का आकार वीडियो के समान नहीं होता है।

जो मैं प्राप्त करने की कोशिश कर रहा हूं वह कुछ है जो आप इन दो वेबसाइटों की पृष्ठभूमि में देख सकते हैं: http://ginlane.com/ और http://www.variousways.com/।

क्या यह यूट्यूब वीडियो के साथ ऐसा करना संभव है?

Answer 1

• चेक करें: Fullscreen video without black borders
• या इस: http://avexdesigns.com/responsive-youtube-embed/
• या यह एक: http://css-tricks.com/fluid-width-youtube-videos/

Answer 2

यह सुंदर पुराना है लेकिन लोग अभी भी यहाँ मदद पड़ सकता है। मुझे इसकी भी आवश्यकता है इसलिए मेरे समाधान का एक पेन बनाया गया है जो मदद करनी चाहिए - http://codepen.io/MikeMooreDev/pen/QEEPMv

उदाहरण एक ही वीडियो के दो संस्करणों को दिखाता है, एक मानक के रूप में और दूसरे फसल और केंद्रीय रूप से पूर्ण पैरेंट तत्व के आकार में फिट करने के लिए गठबंधन भयानक काले सलाखों को दिखाए बिना।

आपको वीडियो के लिए एक नई चौड़ाई की गणना करने के लिए कुछ जावास्क्रिप्ट का उपयोग करने की आवश्यकता है, लेकिन यदि आप पहलू अनुपात को जानते हैं तो यह वास्तव में आसान है।

एचटीएमएल

<div id="videoWithNoJs" class="videoWrapper"> 
    <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe> 
</div> 

सीएसएस - ऊंचाई और चौड़ाई ओ videoWrapper कुछ भी हो सकता है, वे प्रतिशत हो सकता है अगर आप चाहें तो

.videoWrapper { 
    height:600px; 
    width:600px; 
    position:relative; 
    overflow:hidden; 
} 

.videoWrapper iframe { 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

jQuery

$(document).ready(function(){ 
    // - 1.78 is the aspect ratio of the video 
    // - This will work if your video is 1920 x 1080 
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78 
    var aspectRatio = 1.78; 

    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

यह कर सकते हैं यह सुनिश्चित करने के लिए आकार पर ट्रिगर भी किया जा सकता है कि यह उत्तरदायी बना रहता है। ऐसा करने का सबसे आसान (शायद सबसे कुशल नहीं) तरीका निम्न के साथ है।

$(window).on('resize', function() { 

    // Same code as on load   
    var aspectRatio = 1.78; 
    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Answer 3

दुर्भाग्य से यह काम करने .... जब तक मैं कुछ याद आ रही है प्रतीत नहीं होता: http://codepen.io/Archie22is/pen/EWWoEM

jQuery(document).ready(function($){ 
    // - 1.78 is the aspect ratio of the video 
    // - This will work if your video is 1920 x 1080 
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78 
    var aspectRatio = 1.78; 

    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Answer 4

मैं इस पोस्ट कर रहा हूँ क्योंकि उत्तर ऊपर जब आप के लिए कर रहे हैं ऊपर और नीचे पर काले सलाखों। क्या होगा यदि आपके पास पक्षों पर बाएं हैं (बाएं और दाएं)। यह स्क्रिप्ट दो परिदृश्यों का ख्याल रखेगी।

var vidRatio = vidWidth/vidHeight; 
var wrapperHeight = $('#videoIFrameContainer').height(); 
var wrapperWidth = $('#videoIFrameContainer').width(); 
var wrapperRatio = wrapperWidth/wrapperHeight; 
if(wrapperRatio < vidRatio){ 
    var newWidth = wrapperWidth * (vidRatio/wrapperRatio); 
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'}); 

} 
else{ 
    var newHeight = wrapperHeight * (wrapperRatio/vidRatio); 
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'}); 

} 

Answer 5

मैंने इसे समझने की कोशिश में काफी समय बिताया लेकिन यहां एक साधारण सीएसएस समाधान है जो फ्लेक्सबॉक्स का उपयोग करके मेरे लिए काम करता है। असल में, वीडियो को एक कंटेनर में पूर्ण और चौड़ाई और ऊंचाई 100% के साथ रखें और इसे प्रदर्शित करें: फ्लेक्स और सामग्री को केंद्र बनाएं!

https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c

Answer 6

आप नीचे दिए गए इस का उपयोग कर सकते हैं: -

<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe> 

Answer 7

iframe कोड के चारों ओर एक कंटेनर div बनाएँ और यह एक वर्ग जैसे दे:

<div class="video-container"><iframe.......></iframe></div> 

सीएसएस में जोड़ें :

.video-container { 
    position:relative; 
    padding-bottom:56.25%; 
    padding-top:30px; 
    height:0; 
    overflow:hidden; 
} 

.video-container iframe, .video-container object, .video-container embed { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

यह coolestguidesontheplanet.com इस उत्तर का स्रोत यूआरएल है।