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尝试改写，可能是我描述的问题，始终还是没改成。
求解！付费悬赏，谢谢！

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

你要固定iframe的位置，可以在iframe过父器组件中通过设置css属性来固定位置，可以使用position:absolute来固定

建议页头设置手机端识别字体自适应

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

再者你插入的是table里面，最好在th或者td标签中，当是手机端时访问时，用JS或者jQuery动态设置设置valign="top"属性顶部对齐；iframe宽度设置100%，相当于自适应；
还有就是总样式设置*{padding：0；margin:0;}