主页 / 问题 / 623611
Accepted
Anton Essential
Asked:2020-02-05 18:42:07 +0800 CST2020-02-05 18:42:07 +0800 CST

如何包装 iframe 标签？

  • 772

告诉我如何添加一个 iframe 标签包装器，我想为标签制作一个响应式包装器，如果我将 iframe 从 youtube 扔到帖子的正文中，输出是一个包装在 p 标签中的 iframe，它可以包装在，例如 div.responsive-wrapper ？

wordpress

1 个回答

  1. Best Answer

    自适应布局就是这样完成的youtube。padding-bottom: 56.25%根据视频的宽高比计算。在本例中为 16x9。计算是这样进行的：

    9/16*100% = 56.25%


    #video {
  width: 70%;
  margin: auto;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
    <div id="video">
  <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/WlnexV2eAvI" frameborder="0" allowfullscreen>
    </iframe>
  </div>
</div>

    更新：

    您可以通过短代码在帖子的文本中显示自适应iframe。应将以下代码添加到functions.php：

    function youtube_shortcode($atts) {
    ob_start();
    ?>
        <div id="video">
            <div class="video-container">
                <iframe src="https://www.youtube.com/embed/<?php echo $atts['src']; ?>" frameborder="0" allowfullscreen>
                </iframe>
            </div>
        </div>
    <?php
    return ob_get_clean();
}
add_shortcode('youtube', 'youtube_shortcode');

    在帖子的文本中，您需要插入：[youtube src="WlnexV2eAvI"]

    这里有一个工作示例。

    • 1

相关问题