Как сделать видео внутри телефона на html?

Question

[Ord EO]

Являюсь новичком, столкнулся с такой проблемой.
Нужно сделать видео тег внутри картинки. То есть видео должно проигрываться внутри телефона. Как это можно реализовать с помощью HTML?

Answer 1

[ReActor Дмитрий Вершанский]

Суть решения в том, чтобы тег <video> вложить в произвольный блочный контейнер <div>, а затем методом абсолютного позиционирования этого <div> расположить его в желаемом месте изображения

Comments

[ReActor Дмитрий Вершанский]

div {
    position: absolute;
    top: 25%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
}

[ReActor Дмитрий Вершанский]

HunteR-VRX, HunteR-VRX, Это в качестве наметок, от которых отталкиваться

[Ord EO]

HunteR-VRX, Не совсем понимаю как это оформить в виде html
Как то так?

<div class="device">
      <figure>
        <img src="img/iphone.png" alt="Embedded video in Iphone">
        <video width="" height="">
          <source src="movie.mp4" type="video/mp4">
        </video>
      </figure>
    </div>

[ReActor Дмитрий Вершанский]

Ord EO,

html:

<div class="parent">
    <img class="" src="" alt="" />
    <div class="videoBlock">
        <video width="" height="">
          <source src="movie.mp4" type="video/mp4">
        </video>
    </div>
</div>

css:

.parent {
    position: relative;
}

.videoBlock {
   position: absolute;
    top: 25%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
}

[Andrey Vasilev]

Видео криво встанет из-за полосы верху телефона. Можешь попробовать её отрезать и сделать отдельным элементом, потом спозиционируешь и оно будет как будто поверх видео.

Answer 2

[painmaker]

https://picturepan2.github.io/devices.css/#iphone-x