weixin_42246200 2022-12-26 17:29 采纳率: 100%
浏览 132
已结题

让视频在网页居中 高度 匹配到手机平板

问题遇到的现象和发生背景

接上个问题 后续

遇到的现象和发生背景,请写出第一个错误信息

视频 播放 电脑端 可以使用 如何适应平板 手机上面播放的 宽度*高度

用代码块功能插入代码,请勿粘贴截图。 不用代码块回答率下降 50%

CSS样式 请写出来

//让视频在网页居中  高度 匹配到手机平板
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'>
    <source id="source" type="application/x-mpegURL">
</video>

运行结果及详细报错内容
我的解答思路和尝试过的方法,不写自己思路的,回答率下降 60%
我想要达到的结果,如果你需要快速回答,请尝试 “付费悬赏”
  • 写回答

8条回答 默认 最新

  • 进自欢 2022-12-26 18:01
    关注

    1.使用媒体查询来调整视频的大小和位置。可以使用以下代码在视频宽度小于等于 480px 时将视频大小调整为 100%,并居中:

    @media only screen and (max-width: 480px) {
      #myVideo {
        width: 100%;
        height: auto;
        margin: 0 auto;
      }
    }
    

    2.使用 Flexbox 布局将视频居中。可以将视频包装在一个容器中,并使用以下代码将容器设置为 Flexbox 布局:

    #container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    

    3.使用 JavaScript 调整视频的大小和位置。使用以下代码获取视频的宽度和高度,并将其调整为屏幕大小的 50%:

    const video = document.getElementById("myVideo");
    const width = window.innerWidth * 0.5;
    const height = window.innerHeight * 0.5;
    video.style.width = width + "px";
    video.style.height = height + "px";
    video.style.margin = "0 auto";
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)

报告相同问题?

问题事件

  • 系统已结题 1月7日
  • 已采纳回答 12月30日
  • 创建了问题 12月26日

悬赏问题

  • ¥15 请问如何查看手机root记录?
  • ¥15 商城小程序订单号重复
  • ¥15 学校优化算法sbo和蚁群算法怎么结合
  • ¥21 matlab怎么求时域信号的二阶导数
  • ¥15 判断两个表是否完全相同
  • ¥15 java map类型数据格式,如何快速通过前缀匹配元素
  • ¥15 stc12c5a60s2、QMC5883L、LCD1602组合测量磁场所需程序
  • ¥20 Win11测试yolov4,“找不到nvcuda.dll”怎么办?
  • ¥15 simulink绘制bode图
  • ¥15 php_network_getaddresses: getaddrinfo failed: Name or service not known