Question

任何人都可以帮助我：

我试图制作一个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>

代码原样：视频甚至没有出现：因此，我将溢出隐藏在代码中并将“填充顶部”更改为“顶部”：将视频向下推：视频位于我的页面顶部，它应低于它所说的“为什么kevin Kurbs室内设计/观看下面的视频？“

要部分获取视频我希望它如何显示，我会从我的HTML中删除并相应地调整iframe：

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

视频代码来自288-304

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

通过执行此操作，只需在播放视频时使youtube缩略图封面照片响应，它就是中心。那么我如何让这个视频100％宽度和响应，同时保持其宽高比位于“为何凯文库尔布斯室内酒吧？” ？

Answer 1

在这种情况下，您可以使用iframe的计算高度。它是根据youtube视频iframe的页面宽度和默认宽高比计算的。

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

Answer 2

之前我已经完成了自适应视频，我已经使用了这一点jQuery。调整屏幕大小时，它会计算高度应该是多少。

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

Answer 3

这是CSS代码：

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

以下是HTML代码：

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

来源： Make YouTube Embed Video Responsive Using CSS

Answer 4

这是我找到的解决方案：

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                                            
<form action="/displaydata.php" method="post" name="bitpayForm">       
  <input type="hidden" id="PayBitpay1"  name="amount" value="">
</form>   

<form action="/paypal.php" method="post" name="paypalForm">
  <input type="hidden" id="montoPaypal" name="amount" value="">
</form>

<select id="valRechargeSelect" class="form-control" >
  <option value="0">Selecciona un monto</option>
  <option value="5">$5</option>
  <option value="10">$10</option>
</select>
<button class="btn btn-success" id="lvlRechargeBtnPay">Pay With Paypal</button>
<button class="btn btn-success" id="lvlBtcPay">Pay With BTC</button>

CSS：

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

嵌入youtube视频响应解决方案

4 个答案: