javascript - 如何模拟在我的网站上播放视频的电话架？

我想在我的网站上显示视频，但我希望这些视频在电话框架内，例如

我希望视频在白色电话框之类的内部播放。

希望我足够清楚。但是我不知道如何实际执行此操作。
谢谢

最佳答案

主持视频

您有两种选择：

自己将视频托管在您的服务器上，并使用video和source标签将其嵌入到网页中。 HTML：

<video>
   <source src="video.mp4" type="video/mp4" />
   <!-- src and type are an example -->
</video>

（最受欢迎的选项）将视频托管在第三方服务上，例如YouTube，Vimeo或Dailymotion。然后，您所需要做的就是嵌入视频，这通常是在共享菜单中找到的一个选项。

将视频放在手机图像上

将视频嵌入到网页后，将手机图像嵌入到网页中。您可能拥有要使用的电话的图像，或者可以从三个最大的无版权图像站点之一导入一个：

Unsplash
Pexels
Pixabay

将视频和图像都嵌入到网页上之后，然后开始编辑HTML和CSS：

为视频提供比图像更高的z-index，使其显示在视频上方。 CSS：

/* For Video: */

/* Use this if you hosted the video yourself: */

video {
    z-index: 999; /* any value greater than img's */
}

/* Use this if you used a host: */
iframe {
    z-index: 999; /* any value greater than img's */
}

/* For Image: */

img {
    z-index: -999; /* any value smaller than video's */
}

在CSS中将视频的position设置为absolute，使其不出现在图像旁边，并在left，right，top和/或bottom上添加像素恰好位于手机图像上。 CSS：

/* Use this if you hosted yourself: */

video {
    position: relative;
    top: 10px; /* example */
    left: 5px; /* example */
}

/* Use this if you use a host: */

iframe {
    position: relative;
    top: 10px; /* example */
    left: 5px; /* example */
}

现在，调整视频的height和width，使其完全适合手机屏幕。 HTML：

<!-- Use this if you hosted the video yourself: -->

<video>
   <source src="video.mp4" type="video/mp4" width="100px" height="500px" />
   <!-- src, type, width and height are an example -->
</video>

<!-- If you used a host, edit width and height in embed tag(s) they provided: -->

<iframe width="100px" height="500px"></iframe>
<!-- Width and height are an example -->

通过将YouTube上的音乐视频放置到Unsplash的手机图像上，我设法实现了这一目标：JSBin
或从此处运行代码段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Video in Phone</title>
  <style>

    iframe {
      position: absolute;
      z-index: 9999;
      left: 115px;
      top: 133px;
    }

    img {
      z-index: -9999;
    }

  </style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1505156868547-9b49f4df4e04?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80" height="500px" />
<iframe width="140px" height="250px" src="https://www.youtube.com/embed/uYg4cUyJ7v0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>