ย่อวิดีโอ YouTube ให้มีความกว้างที่ตอบสนอง

ฉันมีวิดีโอ YouTube ที่ฝังอยู่ในเว็บไซต์ของเราและเมื่อฉันย่อขนาดหน้าจอเป็นขนาดแท็บเล็ตหรือโทรศัพท์มันจะหยุดหดที่ความกว้างประมาณ 560px นี่เป็นมาตรฐานสำหรับวิดีโอ YouTube หรือมีอะไรที่ฉันสามารถเพิ่มรหัสเพื่อให้เล็กลงได้ไหม

คุณสามารถทำให้วิดีโอ YouTube ตอบสนองด้วย CSS ห่อ iframe ใน div ด้วยคลาส "videowrapper" และใช้สไตล์ต่อไปนี้:

.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 ควรอยู่ในองค์ประกอบที่ตอบสนอง การเว้นช่องว่างบน. videoowrapper เป็นสิ่งจำเป็นเพื่อป้องกันไม่ให้วิดีโอยุบ คุณอาจต้องปรับแต่งตัวเลขขึ้นอยู่กับเค้าโครงของคุณ

หากคุณใช้ Bootstrap คุณยังสามารถใช้การฝังแบบตอบสนองได้ ซึ่งจะทำให้วิดีโอตอบสนองโดยอัตโนมัติ

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>

ฉันใช้ CSS ในคำตอบที่ยอมรับที่นี่สำหรับวิดีโอ YouTube ที่ตอบสนองของฉัน - ทำงานได้ดีจนกระทั่ง YouTube อัปเดตระบบของพวกเขาในช่วงต้นเดือนสิงหาคม 2015 วิดีโอบน YouTube มีขนาดเท่ากัน แต่ไม่ว่าด้วยเหตุผลใดก็ตาม CSS ในคำตอบที่ยอมรับในตอนนี้ ตู้จดหมายวิดีโอทั้งหมดของเรา แถบสีดำด้านบนและด้านล่าง

ผมเคย tickered 56.45%รอบกับขนาดและตั้งรกรากในการกำจัดช่องว่างด้านบนและเปลี่ยนช่องว่างด้านล่างไป ดูเหมือนจะดูดี

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

วิธีแก้ปัญหาเฉพาะ Javascript สำหรับ YouTube และ Vimeo โดยใช้ jQuery

// -- 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>

หรือด้วยกรอบรูปแบบที่ตอบสนองเช่น Bootstrap

<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 ของวิดีโอแทนองค์ประกอบที่กำหนดไว้ล่วงหน้า
• โซลูชัน Javascript
• ไม่มี CSS
• ไม่จำเป็นต้องใช้กระดาษห่อหุ้ม

ขอบคุณ @Dampas สำหรับจุดเริ่มต้น https://stackoverflow.com/a/33354009/1011746

นี่เป็นกระทู้เก่า แต่ฉันพบคำตอบใหม่ในhttps://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

ปัญหาในการแก้ปัญหาก่อนหน้านี้คือคุณต้องมี div พิเศษรอบ ๆ โค้ดวิดีโอซึ่งไม่เหมาะสำหรับการใช้งานส่วนใหญ่ ดังนั้นนี่คือโซลูชัน JavaScript ที่ไม่มี 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

โซลูชันของ @ 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>

ฉันยังตั้งค่า padding-bottom ในเสื้อคลุมด้านในเป็น 50% เพราะด้วย 56% ของ @ magi182 แถบสีดำด้านบนและด้านล่างจะปรากฏขึ้น

พร้อมเครดิตสำหรับคำตอบก่อนหน้าhttps://stackoverflow.com/a/36549068/7149454

ใช้งานร่วมกับ Boostrap ได้รองรับความกว้างของคอนเทนเนอร์ (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>

ดูเค้าเต็มได้ที่นี่และตัวอย่างได้ที่นี่

#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 โหลดจนเต็มแล้ว (เมื่อโหลดหน้าเว็บไม่ทำงาน) และเมื่อใดก็ตามที่ปรับขนาดหน้าต่างเบราว์เซอร์ เมื่อรันจะคำนวณความสูงและความกว้างของ iframe และกำหนดค่าที่เหมาะสมเพื่อรักษาอัตราส่วนที่ถูกต้อง วิธีนี้ใช้ได้ไม่ว่าจะปรับขนาดหน้าต่างในแนวนอนหรือแนวตั้ง

โอเคดูเหมือนวิธีแก้ปัญหาใหญ่

ทำไมไม่เพิ่มwidth: 100%;โดยตรงใน iframe ของคุณ ;)

ดังนั้นรหัสของคุณจะมีลักษณะดังนี้ <iframe style="width: 100%;" ...></iframe>

ลองใช้มันจะได้ผลในกรณีของฉัน

สนุก! :)

ฉันสร้างสิ่งนี้ด้วย css ง่ายๆดังนี้

รหัส HTML

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

รหัส CSS

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

max-width: 100%;
height: auto;

}