накладываемое изображение телефона iframe - PullRequest
0 голосов
/ 07 августа

Итак, я пытаюсь получить изображение iPhone X (изображение имеет прозрачный фон и сам экран телефона тоже прозрачен) с видео YouTube, воспроизводимым внутри него. То, как я пытался это сделать, заключалось в том, чтобы изображение iPhone занимало весь блок div, а затем использовал абсолютное позиционирование для размещения iframe под изображением. Я попытался использовать z-index, чтобы iframe находился за изображением (при этом изображение, по сути, является перекрытием), но в итоге произошло то, что прозрачный фон изображения показывает только цвет фона, а не iframe за ним.

      <div class="col-md-4">
        <div style="position: relative">
          <img
              src="images/phones/iphone-blank-transperant.svg"
              style="z-index: 999;"
          />
          <iframe
              style="z-index: 0; position: absolute; top: 7.5%; width: 75.7%; left:12.65%; height: 82%;"
              src="https://www.youtube.com/embed/IzYp6cqTiAw"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
          ></iframe>
        </div>
      </div>

Еще раз хочу, чтобы iframe был виден под изображением телефона. Я прикрепил изображение в качестве ссылки (мне пришлось преобразовать его в PNG, чтобы загрузить) введите описание изображения здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...