Question

我正在尝试为嵌入式YouTube视频创建一个类，它将在div中以100％宽度显示它们，并根据视频的宽高比调整高度。

我找到了以下建议here：

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="fluidMedia">
    <iframe src="" frameborder="0"> </iframe>
</div>

但这依赖于具有相同宽高比的每个视频都能正常工作。无论嵌入其中的视频如何，我都希望编写一个可以正常运行的类。这可以不用javascript完成吗？

Answer 1

唯一的CSS解决方案是你使用的解决方案，你需要在CSS文件中设置比率 - 因此没有没有JavaScript的通用前端解决方案。

当然，您可以让Drupal为您提取比率 - 并将其写入内联CSS样式属性，如

<div class="fluidMedia" style="padding-bottom: <?=$imgWidth/$imgHeight?>">

如何获得视频比率将是Drupal或PHP问题。

对于JavaScript Solution，请查看AndyM的链接：http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

纯css中的响应iframe

1 个答案: