Bir YouTube videosunu duyarlı genişliğe küçültün


125

Web sitemize gömülü bir YouTube videosum var ve ekranı tablete veya telefon boyutlarına küçülttüğümde, yaklaşık 560 piksel genişliğinde küçülmeyi bırakıyor. Bu, YouTube videoları için standart mı yoksa daha küçük hale getirmek için koda ekleyebileceğim bir şey var mı?


1
Duyarlı yerleştirme kodunuzu oluşturmak için iyi bir kaynak: embedresponsively.com
ThisClark

Yanıtlar:


268

YouTube videolarını CSS ile duyarlı hale getirebilirsiniz. İframe'i "videowrapper" sınıfıyla bir div içine sarın ve aşağıdaki stilleri uygulayın:

.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, duyarlı bir öğenin içinde olmalıdır. .Videowrapper'daki dolgu, videonun daralmasını önlemek için gereklidir. Düzeninize bağlı olarak sayıları değiştirmeniz gerekebilir.


Teşekkür ederim! Duyarlı bir öğe olduğundan emin olmak için # içeriğime genişlik:% 100 eklemeliydim.
MattM


1
benim durumumda, bu CSS'yi uygularken video görünmüyor.
basZero

5
sayı 56.25%ile ilgili ayrıntılı açıklama ve alistapart.com/article/creating-intrinsic-ratios-for-video25px adresinden okunabilir padding-bottom: 56.25% : 16: 9 oranını oluşturmak için 9'u 16'ya bölmeliyiz (0,5625 veya% 56,25). padding-top: 25px: Bozuk kutu modeliyle ilgili sorunları önlemek için (ilginç modda IE5 veya IE6), krom için yer açmak üzere yükseklik yerine padding-top kullanıyoruz.
Tun


27

Bootstrap kullanıyorsanız, duyarlı bir yerleştirme de kullanabilirsiniz. Bu, videoların duyarlı hale getirilmesini tamamen otomatik hale getirecektir.

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

Aşağıda bazı örnek kodlar var.

<!-- 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
videoyu tam genişlikte yapmaktan kaçınmak için bunları bazı col-sm ... vb. içine eklemeniz gerekir.
şafak vakti

1
Bu harika
jastr

Ayrıca videoyu ortalamak için ofset kullanmayı unutmayın. Örneğin:col-sm-8 col-sm-offset-2
Nicolas

9

Duyarlı YouTube videolarım için burada kabul edilen cevapta CSS'yi kullandım - YouTube, Ağustos 2015'in başında sistemlerini güncelleyene kadar harika çalıştı. YouTube'daki videolar aynı boyutlarda ancak her ne sebeple olursa olsun kabul edilen cevapta CSS şimdi tüm videolarımızı mektup kutuları. Üstte ve altta siyah şeritler.

Boyutları inceledim ve üst dolgudan kurtulmaya ve alt dolguyu olarak değiştirmeye karar verdim 56.45%. İyi görünüyor.

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

1
Sadece bununla ilgili bir güncelleme - bazen videolarda kullanılan eski yer tutucu resimler, üstte ve altta hala siyah bantlar varmış gibi görünmesine neden oluyor, ancak gerçekten onları oynatmaya başladığınızda videoların kendisi bu yeni ayarla iyi görünüyor. Grrr, teşekkürler YouTube.
McNab

1
Teşekkürler. Alt dolgu kullanma: Kullandığım videonun üst ve alt siyah çubuklarından% 50 kurtuluyor, ancak küçük resim ve videonun kendisinin uyumsuz en boy oranları var gibi görünüyor ...
MSC

8

JQuery kullanan YouTube ve Vimeo için yalnızca Javascript çözümü geliştirildi.

// -- 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();
});

Yalnızca yerleştirmeyle kullanımı basit:

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

Veya Bootstrap gibi duyarlı stil çerçevesiyle.

<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>
  • En boy oranını korumak için iframe'in genişliğine ve yüksekliğine dayanır
  • Genişlik ve yükseklik için en boy oranını kullanabilir ( width="16" height="9")
  • Yeniden boyutlandırmadan önce belgenin hazır olmasını bekler
  • *=Dizenin başlangıcı yerine jQuery alt dize seçicisini kullanır^=
  • Önceden tanımlanmış öğe yerine video iframe üst öğesinden referans genişliğini alır
  • Javascript çözümü
  • CSS yok
  • Sarmalayıcıya gerek yok

Başlangıç ​​noktası için @Dampas'a teşekkürler. https://stackoverflow.com/a/33354009/1011746


Mükemmel çalışıyor! Çok teşekkür ederim :)
Laran Evans

Bu yardımcı olur. Özellikle HTML öğeleri (ancak JS) üzerinde kontrolünüzün olmadığı ve bir videowrap ayarlayamadığınız durumlarda. Teşekkür ederim.
Kai Noack

Bu çözümün, yeniden boyutlandırma olayını bir JavaScript işlevi ile bağlayacağını ve daha fazla olay eklendikçe tarayıcıya baskı uygulayabileceğini unutmayın. CSS'nin duyarlı stili işlemesine ve performansı artırmasına izin vermek için iframe'i bir sarmalayıcı div'e sarmak için JavaScript'i kullanabileceğinizi unutmayın.
railgun

Birçok çözüm denedim. Bu, YouTube Videolarını duyarlı hale getirmek için İnternet'teki en iyi çözümdür.
Dan Nick

1

Bu eski iş parçacığı, ancak https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php adresinde yeni bir yanıt buldum

Önceki çözümle ilgili sorun, çoğu kullanım için uygun olmayan video kodu etrafında özel div'e sahip olmanız gerektiğidir. İşte özel div içermeyen JavaScript çözümü.

// 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'nin çözümü sağlam, ancak maksimum genişlik ayarlama yeteneğinden yoksun. Bence maksimum 640px genişliğinin gerekli olduğunu düşünüyorum çünkü aksi halde youtube küçük resmi pikselli görünüyor.

İki sarmalayıcılı çözümüm benim için bir cazibe gibi çalışıyor:

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

Ayrıca iç sarıcıdaki dolgu altını% 50 olarak ayarladım, çünkü @ magi182'nin% 56'sında üstte ve altta siyah bir çubuk belirdi.


Bu, duyarlı bir videoyu yerleştirmeye çalışırken bir genişlik (maksimum genişlik) belirtmeye çalışırken benim için daha iyi çalıştı.
yougotiger

1

Önceki cevaba verilen kredilerle https://stackoverflow.com/a/36549068/7149454

Boostrap uyumludur, kapsayıcı genişliğinizi (bu örnekte 300 piksel) ayarlayın ve gitmekte fayda var:

<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

Özüne buradan bakın ve burada canlı örneğe bakın .

#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 yalnızca Youtube oynatıcısı tam olarak yüklendikten sonra (sayfa yüklemesi çalışmaz) ve tarayıcı penceresi yeniden boyutlandırıldığında çağrılır. Çalıştırıldığında, iframe'in yüksekliğini ve genişliğini hesaplar ve doğru en boy oranını koruyarak uygun değerleri atar. Bu, pencere yatay veya dikey olarak yeniden boyutlandırılsa da çalışır.


-1

Tamam, büyük çözümler gibi görünüyor.

Neden width: 100%;doğrudan iframe'inize eklemeyesiniz ? ;)

Yani kodunuz şuna benzer <iframe style="width: 100%;" ...></iframe>

Bunu deneyin, benim durumumda çalıştığı gibi çalışacaktır.

Zevk almak! :)


5
Bu, video için yüksekliği doğru şekilde yeniden boyutlandırmadığından ve bu nedenle kontroller ve siyah şeritleri gösterdiğinden, kabul edilen yanıt daha iyi bir çözümdür
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Bu, yerleşik iframe'lerle duyarlı videolar oluşturmanın başlangıç ​​noktası olduğundan, bu çözümün soruyu doğru yanıtladığını düşünüyorum. Bunu bir ızgara sistemi ile birleştirin ve kalan tek sorun yüksekliktir. => (konteyner genişliği / 12) * 9 = yükseklik.
Tim Vermaelen

-2

Bunu aşağıdaki gibi basit css ile yapıyorum

HTML KODU

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

CSS KODU

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

max-width: 100%;
height: auto;

}

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.