个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 22:55:35 29 4
gpt4 key购买 nike

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

enter image description here

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

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

最佳答案

希望这对某人有帮助:

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>

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

关于javascript - 如何在我的网站上模拟手机框架播放视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59265161/

29 4 0
文章推荐： javascript - 如何在 Angular ng-repeat 中触发处理程序？
文章推荐： c++ - 如何使这个运算符(operator)调用明确？
文章推荐： javascript - 连接来自多维数组和 HTML 的数据
文章推荐： c++ - fseek() 将指针设置到错误的位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com