Bootstrap4: размещение изображения над видео - PullRequest
Новая
       7

Bootstrap4: размещение изображения над видео

0 голосов
/ 23 января 2020

Итак, я хочу разместить прозрачный lo go поверх видео (которое принимает всю ширину и высоту основного раздела). Я использую Bootstrap4 для этого конкретного c веб-сайта, видео адаптивное, поэтому я хочу, чтобы lo go сверху также реагировал. Я пробовал абсолютную позицию, относительный метод позиции без какого-либо результата. Так что, возможно, кто-то может помочь мне в этом.

КОД:

HTML: 

    <main>
  <div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
      <source
        src="/artwork/Video/Final_Edit.mp4"
        type="video/mp4"
      />
      <img class="imgTransparant" src="artwork/Fotos/1x/logo_transparant.png" alt="transparante logo">
    </video>
  </div>
</main>

CSS: 

  video {
position: relative;
height: auto;
width: 100%;
}

.imgTransparant {
position: absolute;
top: 50%;
right: 0;
}

1 Ответ

0 голосов
/ 23 января 2020

Вы должны изменить свою html структуру и немного css, надеюсь, это сработает для вас. 

.embed-responsive {
        position: relative;
    }

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

    .imgTransparant {
        position: absolute;
        top: 50%;
        right: 0;
    }
<main>
    <div align="center" class="embed-responsive embed-responsive-16by9">
        <video autoplay loop class="embed-responsive-item">
            <source src="/artwork/Video/Final_Edit.mp4" type="video/mp4" />
        </video>
        <img class="imgTransparant" src="artwork/Fotos/1x/logo_transparant.png" alt="transparante logo">
    </div>
</main>
...