【问题标题】：How to simulate a phone frame playing videos on my website?如何模拟手机框架在我的网站上播放视频？
【发布时间】：2025-12-03 11:30:01
【问题描述】：

我想在我的网站上显示视频，但我希望这些视频位于手机框架内，例如

我希望视频在白色手机框架之类的地方播放。

希望我已经足够清楚了。但我不知道如何实际做到这一点。谢谢

【问题讨论】：

在背景或伪中使用手机边框图片:before,:after

标签： javascript html css html5-video

【解决方案1】：

主持视频

你有两个选择：

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

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

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

在手机图片上放置视频

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

将视频和图片嵌入网页后，开始编辑 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 或者从这里运行代码 sn-p：

<!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>

【讨论】：

为什么要上传到Youtube，为什么不直接把视频放在一个
仅供参考：您的说明有误。您声明，“2. 在 CSS 中将视频的位置设置为绝对位置 ...”，然后在后面的代码中您得到 position: relative。

【解决方案2】：

希望这对某人有所帮助：

HTML：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="smartphone">
  <div class="content">
    <iframe src="https://tapcart.com/vids/fashionnova_video.mp4" style="width:100%;border:none;height:100%" />
  </div>
</div>

</body>
</html>

CSS：

/* The device with borders */
.smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone .content {
  width: 360px;
  height: 640px;
  background: white;
}

现场示例： https://codepen.io/neilbannet/pen/WNvqNLR

【讨论】：