MrJian7 2023-01-25 13:02 采纳率: 100%
浏览 88
已结题

HTML图片上插图视频播放问题(有偿)

HTML图片上插图视频播放问题
本人是代码白纸,最近在管理网站需要用到一些简单的代码

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th scope="col"><div style="text-align: center; margin: 0; padding: 0;">
          <div id="img01" style="text-align:center;background-image:url(https://img.shoplineapp.com/media/image_clips/63cd7515dad543001da2cc48/original.jpg?1674409237);width:100%;background-position:center;background-repeat:no-repeat;background-size:cover;">
            <iframe src="https://player.vimeo.com/video/789713698?h=46ac4560d8&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&controls=0" width="1200" height="675" frameborder="20" style="border:20px solid rgba(0, 0, 0, 0.0)" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div></th>
    </tr>
  </tbody>
</table>
</html>

运行结果PC端是我想要的效果
但是问题出再手机端,视频却居中到了图片上,把页面的内容都往下移动了,导致浏览内容时,首屏不全面。
希望可以改成视频维持在顶部,背景图片不显示,或者高度跟随视频高度一样,如下图所示。(另外网站是用购物平台系统,但是可以添加客制化语法,所以有些语法是被禁止的,最好也不要外部载入CSS或者JS)

img


img

后来也用了AI尝试改写,可能是我描述的问题,始终还是没改成。
求解!付费悬赏,谢谢!

  • 写回答

4条回答 默认 最新

  • 社区专家-Monster-XH 2023-01-25 13:10
    关注

    在 iframe 标签上添加 position: absolute 和 z-index 属性。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <th scope="col"><div style="text-align: center; margin: 0; padding: 0;">
              <div id="img01" style="text-align:center;background-image:url(https://img.shoplineapp.com/media/image_clips/63cd7515dad543001da2cc48/original.jpg?1674409237);width:100%;background-position:center;background-repeat:no-repeat;background-size:cover;">
                <iframe src="https://player.vimeo.com/video/789713698?h=46ac4560d8&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&controls=0" width="1200" height="675" frameborder="20" style="position: absolute; z-index: 1; border:20px solid rgba(0, 0, 0, 0.0)" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
              </div>
            </div></th>
        </tr>
      </tbody>
    </table>
    </html>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 2月5日
  • 已采纳回答 1月28日
  • 修改了问题 1月25日
  • 创建了问题 1月25日

悬赏问题

  • ¥15 wamp3.3.5安装完成后图标正常显示绿色,鼠标左右键点击图标均无反应。求解决方法。
  • ¥15 鼠标点击的这条记录了什么?
  • ¥15 在写pid调速的程序时,电机始终维持最大速度
  • ¥15 帅锅们,我很想知道这个论坛是用什么模板搭的(T_T)
  • ¥15 请问如何查看手机root记录?
  • ¥15 商城小程序订单号重复
  • ¥15 学校优化算法sbo和蚁群算法怎么结合
  • ¥21 matlab怎么求时域信号的二阶导数
  • ¥15 判断两个表是否完全相同
  • ¥15 java map类型数据格式,如何快速通过前缀匹配元素