Блог

Я здесь новичок, и я не разработчик — я изучаю код на лету, поэтому, пожалуйста, будьте осторожны 🙂

В любом случае, у меня возникли проблемы с разделом видео на домашней странице моего клиента: https://aurorapredictions.com

Во-первых, под видео есть немного «дополнительного» фона, который я не знаю, почему он там. Это волшебным образом исчезает при увеличении или уменьшении масштаба. Странно. Наглядное доказательство здесь

Во-вторых, в зависимости от браузера, при 100% увеличении верхняя часть логотипа и нижняя часть нижней части обрезаются. Наглядное доказательство здесь

Как мне исправить эти проблемы? Ниже приведен код для этого раздела. Заранее благодарю ВАС!

 <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>
  

Удалите фон из (или сделайте его черным):

 .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(amp;quot;https://aurorapredictions.com/wp-content/themes/AuroraCustom/video/Aurora_3MB.jpgamp;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 из приведенного выше кода, проблема с изображением в качестве фона для обоих разделов.