嵌入YouTube视频响应解决方案

我试图做一个嵌入YouTube视频宽度为100％和响应，我发现这个代码，这个网站上，试图做到这一点：

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％宽度和响应速度，同时保持其纵横比低于“Why Kevin Kurbs Interior酒吧”？？

来源

2016-04-03 Midnitezorro

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

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

来源

2016-04-04 08:51:39

感谢的人我很欣赏的帮助！！ – Midnitezorro

当我完成响应视频之前，我已经使用了这一点的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>

来源

2016-04-04 08:57:28

这里是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

来源

2017-02-25 08:51:21

嵌入YouTube视频响应解决方案

回答

相关问题