如何使视频的宽度100%或高度100%

要使视频的宽度或高度为100%，可以通过CSS和HTML来实现。

对于宽度100%： 可以将视频容器的宽度设置为100%，然后将视频的宽度设置为100%。具体代码如下：

HTML代码：

<div class="video-container">
  <video src="video.mp4" controls></video>
</div>

CSS代码：

.video-container {
  width: 100%;
  max-width: 100%;
}

.video-container video {
  width: 100%;
  height: auto;
}

在上述代码中，我们创建了一个video-container的div容器，将宽度设置为100%。然后在该容器内部嵌入了一个video标签，将视频的宽度设置为100%。此时视频的宽度将自动适应其父容器的宽度，实现宽度100%的效果。

对于高度100%： 要使视频的高度为100%，需要先确定视频的宽高比，然后通过padding-top属性来设置容器的高度。具体代码如下：

HTML代码：

<div class="video-container">
  <div class="video-wrapper">
    <video src="video.mp4" controls></video>
  </div>
</div>

CSS代码：

.video-container {
  position: relative;
  width: 100%;
}

.video-wrapper {
  width: 100%;
  padding-top: 56.25%; /* 假设视频宽高比为16:9，则高度为宽度的0.5625倍 */
  position: relative;
}

.video-wrapper video {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

在上述代码中，我们创建了一个video-container的div容器，将宽度设置为100%。然后在该容器内部创建了一个video-wrapper的div容器，通过padding-top属性设置了高度为宽度的0.5625倍，即假设视频的宽高比为16:9。最后，在video-wrapper容器内部嵌入了一个video标签，将视频的宽度和高度都设置为100%。此时视频的高度将自动适应其父容器的宽度，实现高度100%的效果。

注意：在实际开发中，视频的宽高比可能不同，需要根据实际情况来调整padding-top的值。另外，为了确保视频在不同设备上的表现一致，还可以使用媒体查询来适配不同的屏幕尺寸。

推荐的腾讯云相关产品：腾讯云点播（https://cloud.tencent.com/product/vod）