如何将视频集中在狭窄的显示器上

Question

我有一个html页面，其中包含视频作为背景。问题是在狭窄的屏幕上，内容不在屏幕上，因为内容是对齐的。如何将视频内容集中在视频html标记中？

宽屏

窄屏

​

Answer 1

将此添加到.video CSS中

top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

所以它变成了

#wrapper, video {
   position: fixed;
   right: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

​

​

Answer 2

我完全修正了你的代码，在CSS中也有一个小问题，发音宽度和高度错误。结果是：(阅读css代码的最后一行)(并将其他代码放入我删除的文件中)

​

body,
html {
    height: 100%;
    width: 100%;
    background-color: #000;
    position: relative;
    overflow: hidden;
    font-family: Verdana, sans-serif;
    color: #d0d0ff;
    color: #ffa68d
}

#wrapper,
video {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%
}

#wrapper {
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

#wrapper #content {
    padding: 75px;
    font-size: 40px;
    max-width: 550px
}

#wrapper #content h1 {
    margin-top: 0
}

#wrapper #side {
    padding: 75px;
    font-size: 25px
}

#wrapper #side ul li {
    list-style-type: none;
    padding: 14px
}

#wrapper #side ul li a {
    color: #ffa68d;
    text-decoration: none
}

#wrapper #side ul li a:active,
#wrapper #side ul li a:hover {
    color: #ffd8ce;
    text-shadow: 0 0 20px #ffc7b7
}

#wrapper .translateInit {
    transform: translateY(-450px);
    opacity: 0
}

#wrapper .translateInit-2 {
    transform: translate(450px);
    opacity: 0
}

#wrapper .translateInit-3 {
    transform: translateY(450px);
    opacity: 0
}

#wrapper .translateInit-4 {
    transform: translate(-450px);
    opacity: 0
}

#wrapper .translate {
    transition: all .25s
}

.fs-40 {
    font-size: 40px
}

.fs-30 {
    font-size: 30px
}

.about-hover:hover {
    color: #ffd8ce
}

@media (max-width:1020px) {
    #wrapper {
        flex-direction: column
    }

    #wrapper #content {
        font-size: 25px !important;
        padding: 25px;
        text-align: center
    }

    #wrapper #side {
        padding: 25px
    }

    #wrapper #side ul li {
        padding: 7px;
        text-align: center
    }

    .fs-30 {
        font-size: 20px
    }
    video {
        top: 0;
        // You can change this perscentage as you want
        right: -60%;
    }
}

// Mobile First
@media screen and (max-width: 768px) {
  video {
    top: 0;
    // You can change this perscentage as you want
    right: -70%
  }
}

    <video autoplay="" muted="" loop="" __idm_id__="693906433">
        <source src="https://tatrytec.eu/storage/homepage/vid1.mp4" type="video/mp4">
        <p>Your browser doesn't support HTML5 video. Here is
            a <a href="https://tatrytec.eu/myVideo.mp4">link to the video</a> instead.</p>
    </video>
    <div id="wrapper">
        <div id="side" class="translate">
            <ul>
                <li><a href="https://tatrytec.eu/">Vitajte</a></li>
                <li><a href="https://tatrytec.eu/about">O nás</a></li>
                <li><a href="https://tatrytec.eu/contact">Kontakt</a></li>
                <li><a href="https://tatrytec.eu/najnovsie">Blog</a></li>
            </ul>
        </div>
        <div id="content">
            <div id="welcome" class="translate">
                <h1>Tatrytec.eu</h1>
                <div>Let your dreams <br>come true...</div>
            </div>
        </div>
    </div>

​

Answer 3

.video {
width: 100%;
height: 100%;
}

添加以下代码