嵌入 YouTube IFrame 响应

Question

我在 Magento 网站上嵌入了带有以下 link 的 YouTube 视频（Magento 并不重要，除非有我不知道的插件）

<iframe width="640" height="360" src="http://www.youtube.com/embed/Zq-805aUM7M?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

我不认为这段代码很好，因为它没有响应。我该如何解决？

Answer 1

尝试这种纯粹的css方式：

iframe, object, embed {
        max-width: 100%;
        max-height: 100%;
}

如果不行试试这个

https://benmarshall.me/responsive-iframes/

Answer 2

要专门定位 youtube 视频，而不是所有 iframe 或嵌入对象，您可以使用基于 src 中存在的字符串的属性选择器。

iframe[src*=youtube]
{
  max-width:100%;
  height:100%;
}

这对我有用，但无论如何，here you can find more solutions 用于其他（特定）案例

Answer 3

网上有很多提示建议删除 'width' 和 'height' 属性，这在某些情况下是不可能的。但是用户可以使用 CSS

覆盖这些属性

.wrapper {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%; }

和 iframe：

.wrapper iframe[width][height] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; }

请注意 CSS 选择器中的 [width] 和 [height] 以及“!important”说明 - 这些对于覆盖 iframe 的宽度和高度属性值至关重要。

Answer 4

首先，设置 iframe 的宽度和高度以匹配您的比例 - 对我来说是 16by9:

<figure>
    <iframe class="youtube-video" width="640" height="360" src="..." allowfullscreen></iframe>
</figure>
<script>
    $(function(){
        var
            $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed")
            ,$fluidEl = $("figure")
        ;
        $allVideos.each(function() {
            $(this).attr('data-aspectRatio', this.height / this.width).removeAttr('height').removeAttr('width');
        });
        $(window).resize(function(){
            var newWidth = $fluidEl.width();
            $allVideos.each(function(){
                var $el = $(this);
                $el.width(newWidth).height(newWidth * $el.attr('data-aspectRatio'));
            });
        }).resize();
    });
</script>

Bootstrap 4 业主（可能更低）更幸运：

<figure class="embed-responsive embed-responsive-16by9">
    <iframe class="youtube-video" width="640" height="360" src="..." allowfullscreen></iframe>
</figure>

Answer 5

我试过了，但没有一个真正有反应。所以使用了以下 iframe & CSS

HTML:

    <iframe class="video-container"  src="https://www.youtube.com/embed/-H2mmm5pMmY" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


CSS:
.video-container {
position:relative;
height:22em;
width:-webkit-fill-available;
overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}

Answer 6

我最终得到了这个，它把所有的 iframe 元素变成了 16:9:

<style>
.youtube-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<iframe src="https://www.youtube.com/watch?v=oTLZci5dp44"></iframe>

<script>
$('iframe[src*="youtube"]').wrap('<div class="youtube-container"></div>');
</script>

Answer 7

我认为这是最好的方法

.youtube-video {
  width: 100%;
  aspect-ratio: 16/9;
}

<iframe class="youtube-video" src="<YOUR_YOUTUBE_VIDEO_URL>" frameborder="0"></iframe>

同时检查 here 以了解 aspect-ratio

的浏览器兼容性

Answer 8

我为我未来的网站解决了这个问题。这是我的脚本；我想知道你怎么想。它应该适用于任何提供者（youtube、vimeo 等），保留原始纵横比，并且只要你运行 videoIframe_MakeResponsive('youtube', '16 /9') 更新页面后。如果未指定 width/height，则“16/9”是默认纵横比。希望对您有所帮助！

// Greatest Common Divisor
function Math_gcd(a, b) {
    if (a<b)
        [a, b] = [b, a]
    return b ? Math_gcd(b, a%b) : a
}

// get ratio ('16/9' or something) from dimensions
function Math_ratio(width, height) {
    const gcd = Math_gcd(width, height)
    return width/gcd + '/' + height/gcd
}

// add multiple css properties
function css(element, jsonCSS) {
    for (const property in jsonCSS)
        element.style[property] = jsonCSS[property]
}

// autorun
function autorun(callback) {
    if (document.readyState != 'loading')
        callback()
    else
        document.addEventListener('DOMContentLoaded', callback)
}

// responsive iframe
function videoIframe_MakeResponsive(provider, defaultRatio = '16/9') {
    document.querySelectorAll('iframe[src*="' + provider + '"]').forEach(iframe => {
        if (!iframe.classList.contains('videoIframeFixed')) { // fix only new iframes
            let width = iframe.getAttribute('width')
            let height = iframe.getAttribute('height')
            let aspectratio = (width && height) ? Math_ratio(width, height) : defaultRatio
            iframe.removeAttribute('width') // reset
            iframe.removeAttribute('height') // reset
            iframe.classList.add('videoIframeFixed') // for future reference
            // wrapper container
            let wrapper = document.createElement('div')
            iframe.parentNode.insertBefore(wrapper, iframe)
            wrapper.appendChild(iframe) // move iframe inside
            // style
            css(wrapper, {
                'width': '100%',
                'position': 'relative',
                'aspect-ratio': aspectratio
            })
            css(iframe, {
                'width': '100%',
                'height': '100%',
                'position': 'absolute'
            })
        }
    })
}

// run it on page load
autorun(function () {
    videoIframe_MakeResponsive('youtube')
    videoIframe_MakeResponsive('vimeo')
    /* ... etc ... */
})

嵌入 YouTube IFrame 响应

Embed YouTube IFrame responsive

html

youtube

responsive-design