Question

我有以下需要响应的html和CSS。

首先要从labnol.org找到嵌入的轻量级YouTube视频（无需下载YouTube代码）。然后，我将youtube-player div与其他两个div封装在一起，以使视频水平居中。

我已经尝试了一些在SO中看到过的解决方案，但是还没有完成这项工作。我希望能够在任何显示器上设置最大宽度，但在移动设备上查看时，不要使其超出屏幕边缘。

非常感谢您的帮助。谢谢。

HTML：

<div id="videoParent" class="videoParent">
<div id="videoDiv" class="videoDiv">
<div class="youtube-player" data-id="gmX8VFlrv38"></div>
</div>
</div>

使用以下CSS。

<style>
    <style>
    .videoDiv {
         max-width:560px;
         display:inline-block;
         width:90%;

    }
    .videoParent {
          text-align:center;
    }

        .youtube-player {
            position: relative;
            padding-bottom: 56.23%;
            /* Use 75% for 4:3 videos */
            height: 0;
            /*width:400px; */
            overflow: hidden;
            max-width: 100%;
            background: #000;
            margin: 5px;
        }

        .youtube-player iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
           height: 100%;
            z-index: 100;
            background: transparent;
        }

        .youtube-player img {
            bottom: 0;
            display: block;
            left: 0;
            margin: auto;
            max-width: 100%;
            width: 100%;
            position: absolute;
            right: 0;
            top: 0;
            border: none;
            height: auto;
            cursor: pointer;
            -webkit-transition: .4s all;
            -moz-transition: .4s all;
            transition: .4s all;
        }

        .youtube-player img:hover {
            -webkit-filter: brightness(75%);
        }

        .youtube-player .play {
            height: 72px;
            width: 72px;
            left: 50%;
            top: 50%;
            margin-left: -36px;
            margin-top: -36px;
            position: absolute;
            background: url("//i.imgur.com/TxzC70f.png") no-repeat;
            cursor: pointer;
        }</style>

Answer 1

我将CSS简化为以下内容，因为它似乎可以满足我的要求。

.videoParent {
      text-align:center;
}
.videoDiv {
     max-width:560px;
     display:inline-block;
     width:60%;
   }

内置视频的自适应DIV

1 个答案: