主页模板上的php代码问题

Question

我是新来的，我不是开发人员 - 我正在快速学习代码，所以请保持温和 :)

无论如何，我在客户主页上的视频部分遇到了问题： https://aurorapredictions.com

首先，视频下方有一些“额外”的背景，我不知道为什么会出现。当您放大或缩小时，它会神奇地消失。奇怪的。 Picture Evidence Here

其次，根据浏览器的不同，在 100% 的放大率下，徽标的顶部和底部的底部被切断。 Picture Evidence Here

如何解决这些问题？下面是该部分的代码。提前谢谢你！

<section class="videoHolder">
<div class="header-video" style="width: 100%; height: 100%;" data-vide-bg="mp4: wp-content/themes/AuroraCustom/video/Aurora_3MB, ogv: wp-content/themes/AuroraCustom/video/Aurora_3MB, webm: wp-content/themes/AuroraCustom/video/Aurora_3MB, poster: wp-content/themes/AuroraCustom/video/Aurora_3MB" data-vide-options="loop: false, muted: false, position: 100% 100%">
    <div class="tagsholder">
        <div class="shell">
            <div class="tags line1" id="line1">
                <?php echo CFS()->get( 'title_1' ); ?> </div>
            <div class="tags line2">
                <?php echo CFS()->get( 'title_2' ); ?> </div>
            <div class="tags line3">
                <?php echo CFS()->get( 'title_3' ); ?> </div>
            <div class="tags line4">
                <?php echo CFS()->get( 'title_4' ); ?> </div>
        </div>
    </div>
    <div class="line5">
        <div class="large-logo"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/aurora_large_logo.png" alt="Aurora Predictions"/>
            <p class="l5tag logo_title">Discover your tomorrow today </p>
            <?php $link1 = CFS()->get( 'button_1_link' ); ?>
            <?php $link2 = CFS()->get( 'button_2_link' ); ?>
            <a href="<?php echo $link1[url]; ?>" target="<?php echo $link1[target]; ?>" class="btn btn-primary btnscla">
                <?php echo $link1[text]; ?> </a>
            <!--<a class="btn btn-gray btnscla btn-btm" href="<?php echo $link2[url]; ?>" target="<?php echo $link2[target]; ?>">
                <?php echo $link2[text]; ?> </a>-->
        </div>
    </div>
</div>

Answer 1

移除背景（或使其变黑）：

.videoHolder {
    background-image: url(../video/Aurora_3MB.jpg);
    background-size: cover;
}

正如您在包装 div 上也有它（还有一堆由您的代码生成的其他东西）：

<div style="
  position: absolute; 
  z-index: -1; 
  top: 0px; 
  left: 0px; 
  bottom: 0px; 
  right: 0px; 
  overflow: hidden; 
  background-size: cover; 
  background-color: transparent;
  background-repeat: no-repeat; 
  background-position: 100% 100%; 
  background-image: url(&quot;https://aurorapredictions.com/wp-content/themes/AuroraCustom/video/Aurora_3MB.jpg&quot;);
">
  <video autoplay="" style="margin: auto; position: absolute; z-index: -1; top: 100%; left: 100%; transform: translate(-100%, -100%); visibility: hidden; opacity: 0; width: auto; height: 842px;">
    <source src="wp-content/themes/AuroraCustom/video/Aurora_3MB.mp4" type="video/mp4">
    <source src="wp-content/themes/AuroraCustom/video/Aurora_3MB.webm" type="video/webm">
    <source src="wp-content/themes/AuroraCustom/video/Aurora_3MB.ogv" type="video/ogg">
  </video>
</div>

或者从上面的代码中删除poster: wp-content/themes/AuroraCustom/video/Aurora_3MB，将图像作为两个 div 的背景是问题所在。