एक YouTube वीडियो को उत्तरदायी चौड़ाई में सिकोड़ें


125

मेरे पास हमारी वेबसाइट पर एक YouTube वीडियो एम्बेडेड है और जब मैं स्क्रीन को टैबलेट या फ़ोन के आकार में सिकोड़ता हूं तो यह लगभग 560px चौड़ाई में सिकुड़ना बंद कर देता है। क्या YouTube वीडियो के लिए यह मानक है या ऐसा कुछ है जिसे मैं कोड में जोड़ सकता हूं ताकि वह छोटा हो जाए?


1
अपने उत्तरदायी एम्बेड कोड को उत्पन्न करने के लिए अच्छा संसाधन: embedresponsively.com
ThisClark

जवाबों:


268

आप सीएसएस के साथ YouTube वीडियो को उत्तरदायी बना सकते हैं। "वीडियोवाहक" के वर्ग के साथ एक div में iframe लपेटें और निम्नलिखित शैलियों को लागू करें:

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Videowrapper div एक उत्तरदायी तत्व के अंदर होना चाहिए। वीडियो को टकराने से बचाने के लिए .videowrapper पर पैड लगाना आवश्यक है। आपको अपने लेआउट के आधार पर संख्याओं को मोड़ना पड़ सकता है।


धन्यवाद! मुझे यह सुनिश्चित करने के लिए कि यह एक उत्तरदायी तत्व था, मुझे अपनी #content की चौड़ाई में १००% जोड़ना था।
मैट

6
यह भी देखें: css-tricks.com/NetMag/FluidWidthVideo/...
Blazemonger

1
मेरे मामले में इस सीएसएस को लागू करते समय वीडियो दिखाई नहीं देता है।
बेसजेरो

5
संख्या पर विस्तार से विवरण 56.25%और alistapart.com/article/creating-intrinsic-ratios-for-video25px पर पढ़ा जा सकता है : 16: 9 अनुपात बनाने के लिए, हमें 9 को 16 (0.5625 या 56.25%) से विभाजित करना होगा। : टूटे हुए बॉक्स मॉडल (क्वर्क्स मोड में IE5 या IE6) के मुद्दों से बचने के लिए, हम क्रोम के लिए जगह बनाने के लिए ऊंचाई के बजाय पैडिंग-टॉप का उपयोग करते हैं। padding-bottom: 56.25%padding-top: 25px
ट्यून

आप youtube iframe का उदाहरण यहां देख सकते हैं @ http://alistapart.com/d/creating-intrinsic-ratios-for-video/example4.html
विग्नेश चिनैयन

27

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

http://getbootstrap.com/components/#responsive-embed

नीचे कुछ उदाहरण कोड है।

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

1
यह जोड़ने योग्य है कि आपको वीडियो को पूरी चौड़ाई बनाने से बचने के लिए कुछ कॉल-एसएम ... आदि के अंदर डालना चाहिए।
सुबह

1
यह आश्चर्यजनक है
jastr

इसके अलावा, वीडियो को केंद्रित रखने के लिए ऑफ़सेट का उपयोग करना न भूलें। उदाहरण के लिए:col-sm-8 col-sm-offset-2
निकोलस

9

मैंने अपने उत्तरदायी YouTube वीडियो के लिए यहां स्वीकृत उत्तर में CSS का उपयोग किया - अगस्त 2015 की शुरुआत के आसपास YouTube ने अपने सिस्टम को अपडेट करने तक बहुत सही काम किया। YouTube पर वीडियो समान आयाम हैं, लेकिन जो भी कारण हो सकता है कि स्वीकृत उत्तर में CSS अब भी हो हमारे सभी वीडियो को लेटरबॉक्स करता है। ऊपर और नीचे काले बैंड।

मैंने आकारों के साथ गुदगुदी की है और शीर्ष पैडिंग से छुटकारा पाने और नीचे की पैडिंग को बदलने पर बस गया हूं 56.45%। अच्छा लगने लगता है।

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

1
बस इस पर एक अपडेट - कभी-कभी वीडियो पर उपयोग की जाने वाली पुरानी प्लेसहोल्डर छवियां ऐसा दिखती हैं कि अभी भी ब्लैक बैंड ऊपर और नीचे हैं, लेकिन वीडियो स्वयं इस नई सेटिंग के साथ अच्छे लगते हैं जब आप वास्तव में उन्हें खेलना शुरू करते हैं। Grrr, धन्यवाद YouTube
मैकनाब

1
धन्यवाद। पैडिंग-बॉटम का उपयोग: मैं जिस वीडियो का उपयोग कर रहा हूं, उसके लिए 50% ऊपर और नीचे की काली पट्टियों से छुटकारा मिल जाता है, हालांकि ऐसा लगता है कि थंबनेल और वीडियो में पहलू अनुपात की बेमेल है ...
MSC

8

JQuery का उपयोग करके YouTube और Vimeo के लिए केवल जावास्क्रिप्ट परिष्कृत करें।

// -- After the document is ready
$(function() {
  // Find all YouTube and Vimeo videos
  var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");

  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });

  // When the window is resized
  $(window).resize(function() {
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
      var $el = $(this);
      // Get parent width of this video
      var newWidth = $el.parent().width();
      $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });

  // Kick off one resize to fix all videos on page load
  }).resize();
});

केवल एम्बेड के साथ उपयोग करने के लिए सरल:

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

या बूटस्ट्रैप जैसे उत्तरदायी शैली के ढांचे के साथ।

<div class="row">
  <div class="col-sm-6">
    Stroke Awareness
  <div class="col-sm-6>
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
  • पहलू अनुपात को संरक्षित करने के लिए iframe की चौड़ाई और ऊंचाई पर निर्भर करता है
  • चौड़ाई और ऊंचाई के लिए पहलू अनुपात का उपयोग कर सकते हैं ( width="16" height="9")
  • आकार बदलने से पहले दस्तावेज़ तैयार होने तक प्रतीक्षा करता है
  • *=स्ट्रिंग की शुरुआत के बजाय jQuery के विकल्प चयनकर्ता का उपयोग करता है^=
  • पूर्वनिर्धारित तत्व के बजाय वीडियो iframe जनक से संदर्भ चौड़ाई प्राप्त करता है
  • जावास्क्रिप्ट समाधान
  • कोई सीएसएस नहीं
  • किसी रैपर की जरूरत नहीं

शुरुआती बिंदु के लिए @Dampas का धन्यवाद। https://stackoverflow.com/a/33354009/1011746


अच्छी तरह से काम! बहुत बहुत धन्यवाद :)
Laran इवांस

इससे मदद मिलती है। विशेष रूप से ऐसे मामलों में जहां आपका HTML तत्वों (लेकिन JS) पर कोई नियंत्रण नहीं है और एक वीडियो सेट नहीं कर सकते हैं। धन्यवाद।
काई नोएक

ध्यान दें कि यह समाधान एक जावास्क्रिप्ट फ़ंक्शन के साथ आकार बदलने वाली घटना को बांध देगा, जो ब्राउज़र पर तनाव डाल सकता है क्योंकि अधिक इवेंट जोड़े जाते हैं। याद रखें कि आप CSS को उत्तरदायी स्टाइलिंग और प्रदर्शन को बढ़ावा देने के लिए रैपर div में आइफ्रेम लपेटने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।
रेलगाड़ी

मैंने कई उपाय आजमाए हैं। YouTube वीडियो को उत्तरदायी बनाने के लिए इंटरनेट पर यह सबसे अच्छा समाधान है।
दान निक

1

यह पुराना धागा है, लेकिन मुझे https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php पर नया उत्तर मिल गया है

पिछले समाधान के साथ समस्या यह है कि आपको वीडियो कोड के आसपास विशेष div की आवश्यकता है, जो कि अधिकांश उपयोगों के लिए उपयुक्त नहीं है। तो यहाँ विशेष div के बिना जावास्क्रिप्ट समाधान है।

// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

    $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

    var newWidth = $fluidEl.width();

    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {

        var $el = $(this);
        $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));

    });

// Kick off one resize to fix all videos on page load
}).resize();

// END RESIZE VIDEOS

1

@ magi182 का समाधान ठोस है, लेकिन इसमें अधिकतम चौड़ाई निर्धारित करने की क्षमता का अभाव है। मुझे लगता है कि 640px की अधिकतम चौड़ाई आवश्यक है क्योंकि अन्य थंबनेल YouTube थंबनेल पिक्सेलित दिखता है।

दो रैपर्स के साथ मेरा समाधान मेरे लिए एक आकर्षण की तरह काम करता है:

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

मैंने आंतरिक आवरण में पैडिंग-तल को 50% पर भी सेट किया, क्योंकि @ magi182 के 56% के साथ, ऊपर और नीचे एक काली पट्टी दिखाई दी।


इसने मेरे लिए एक उत्तरदायी वीडियो को एम्बेड करने के लिए बेहतर काम किया, लेकिन एक चौड़ाई (अधिकतम-चौड़ाई) निर्दिष्ट करें।
yougotiger 23

1

पिछले उत्तर के लिए क्रेडिट के साथ https://stackoverflow.com/a/36549068/7149454

संगत को संगत करें, अपने कंटेनर की चौड़ाई (इस उदाहरण में 300px) पर जाएं और आप जाने के लिए अच्छे हैं:

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>

0

पूरी जिंदादिली यहां देखें और उदाहरण यहां देखें

#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
            <div class="videoWrapper">
                 <div id="player"></div>
            </div>
            </center>
            <script>
            function onYouTubeIframeAPIReady() { 
                player = new YT.Player('player', {
                   videoId:'xxxxxxxxxxx',playerVars: {  controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
                } );
                resizeHeroVideo();
             }
             </script>
        </div>
    </div>
</div>

var player = null;
$( document ).ready(function() {
    resizeHeroVideo();
} );

$(window).resize(function() {
    resizeHeroVideo();
});

function resizeHeroVideo() {
    var content = $('#hero');
    var contentH = viewportSize.getHeight();
    contentH -= 158;
    content.css('height',contentH);

    if(player != null) {
        var iframe = $('.videoWrapper iframe');
        var iframeH = contentH - 150;
        if (isMobile) {
            iframeH = 163; 
        }
        iframe.css('height',iframeH);
        var iframeW = iframeH/9 * 16;
        iframe.css('width',iframeW);
    }
}

resizeHeroVideo को केवल तब ही कहा जाता है जब Youtube प्लेयर पूरी तरह से लोड हो जाता है (पेज लोड नहीं होता है), और जब भी ब्राउज़र विंडो का आकार बदला जाता है। जब यह चलता है, तो यह आइफ्रेम की ऊंचाई और चौड़ाई की गणना करता है और सही पहलुओं के अनुपात को बनाए रखते हुए उपयुक्त मान प्रदान करता है। यह काम करता है कि खिड़की क्षैतिज या लंबवत आकार में बदल दी गई है या नहीं।


-1

ठीक है, बड़े समाधान की तरह दिखता है।

width: 100%;सीधे अपने iframe में क्यों न जोड़ें । ;)

तो आपका कोड कुछ ऐसा दिखाई देगा <iframe style="width: 100%;" ...></iframe>

इसे आज़माएँ क्योंकि यह मेरे मामले में काम करेगा।

का आनंद लें! :)


5
क्योंकि यह वीडियो के लिए ऊँचाई को सही ढंग से आकार नहीं देता है, और इसलिए नियंत्रण और काली स्ट्रिप्स दिखाता है, स्वीकृत उत्तर एक बेहतर समाधान है
CᴴᵁᴮᴮʸN

चूंकि यह एम्बेडेड आइफ्रेम के साथ उत्तरदायी वीडियो बनाने के लिए शुरुआती बिंदु है, मेरा मानना ​​है कि यह समाधान प्रश्न का सही उत्तर देता है। इसे ग्रिड सिस्टम के साथ मिलाएं और ऊँचाई एकमात्र मुद्दा बचा है। => (कंटेनर की चौड़ाई / 12) * 9 = ऊंचाई।
टिम वर्मालेन

-2

मैं इसे सरल सीएसएस के साथ निम्नानुसार बनाता हूं

HTML कोड

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>

सीएसएस कोड

<style type="text/css">
#vid {

max-width: 100%;
height: auto;

}

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.