Итак, я пытаюсь получить изображение 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, чтобы загрузить) введите описание изображения здесь