嵌入 youtube 視頻響應解決方案 (embed youtube video responsive solution)

問題描述

嵌入 youtube 視頻響應解決方案 (embed youtube video responsive solution)

誰能幫幫我：

我正在嘗試製作一個 100% 寬度和響應式的嵌入 youtube 視頻，我在這個網站上找到了這段代碼來嘗試實現這一點：

http://avexdesigns.com/responsive‑youtube‑embed/

css:

.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%;
}

Html:

<div class="video‑container">
     <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

代碼原樣：視頻甚至沒有出現：所以我將溢出隱藏在代碼中並更改“填充‑頂部”到只是“頂部”：將視頻向下推：視頻在我的頁面頂部，它應該在下面寫著“為什麼是凱文庫爾布斯室內設計/觀看下面的視頻？”

為了部分獲取我希望它顯示的視頻，我從我的 html 中刪除並相應地調整 iframe：

iframe { 
    width: 100%;
    top: 5px;  
    margin‑bottom: ‑5px
}

視頻代碼來自 288‑304

http://graph‑art.matc.edu/harrisd5/vicom126/a2/index.html

這樣做只是讓 youtube 縮略圖封面照片在播放視頻時做出響應，它是中心。那麼我如何讓這個視頻具有 100% 的寬度和響應性，同時保持其縱橫比置於“為什麼選擇 Kevin Kurbs 內部欄？”下方。?

參考解法

方法 1:

Here is the solution I found:

HTML:

<div class='embed‑container'>
    <iframe src='https://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe>
</div>

CSS:

.embed‑container {
    position: relative;
    padding‑bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max‑width: 100%;
}

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

方法 2:

In this case you could use calculated height for your iframe. It is calculating from the page width and the default aspect ratio of the youtube video iframe.

iframe {
    width: 100%;
    top: 5px;
    margin‑bottom: ‑5px;
    height: calc(100vw*(315/560));
}

方法 3:

When I've done responsive videos before, I've used this bit of jQuery. When the screen is resized, it calculates what the height should be.

<script>    
var $allVideos = $("iframe[src^='https://player.vimeo.com'], iframe[src^='http://player.vimeo.com'], iframe[src^='https://www.youtube.com'], iframe[src^='http://www.youtube.com'], object, embed"),


    $allVideos.each(function() {

      $(this)
        // jQuery .data does not work on object/embed elements
        .attr('data‑aspectRatio', this.height / this.width)
        .removeAttr('height')
        .removeAttr('width');

    });

    $(window).resize(function() {



      $allVideos.each(function() {

        $fluidEl = $(this).parent();
        var newWidth = $fluidEl.width();

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

      });

    }).resize();
</script>

方法 4:

Here is the CSS code:

.yt‑container {
  position:relative;
  padding‑bottom:56.25%;
  padding‑top:30px;
  height:0;
  overflow:hidden;
}
.yt‑container iframe, .yt‑container object, .yt‑container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

And below is the HTML code:

<div class="yt‑container">
   <iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>
</div>

Source: Make YouTube Embed Video Responsive Using CSS

(by Midnitezorro、JulienRioux、Mate Zabo、Oli B、Faruque Ahamed Mollick)

參考文件

1. embed youtube video responsive solution (CC BY‑SA 2.5/3.0/4.0)