如何模拟手机框架在我的网站上播放视频？

Question

如何模拟手机框架在我的网站上播放视频？

5 html javascript css html5-video

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

我希望视频在白色手机边框之类的东西内播放。

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

Answer 1

Nob*_*ody 9

希望这对某人有帮助：

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://wpcoder.co.uk/links/mixkit-man-holding-neon-light-1238-large.mp4" style="width:100%;border:none;height:100%" />
  </div>
</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

实例： https: //codepen.io/neilbannet/pen/WNvqNLR

Answer 2

小智 5

主持视频

您有两个选择：

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

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

Run Code Online (Sandbox Code Playgroud)

（最受欢迎的选项）在第三方服务上托管视频，例如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 */
}

Run Code Online (Sandbox Code Playgroud)

在 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 */
}

Run Code Online (Sandbox Code Playgroud)

现在调整视频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 -->

Run Code Online (Sandbox Code Playgroud)

我通过将 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，5 月前
查看次数：	6242 次
最近记录：	4 年，2 月前