CSS响应式视频：优化视频在不同设备上的播放效果

<div class="video-container">  <video controls>    <source src="video.mp4" type="video/mp4">    <source src="video.webm" type="video/webm">    <source src="video.ogg" type="video/ogg">  </video></div>

.video-container {  position: relative;  width: 100%;}.video-container video {  width: 100%;  height: auto;}@media screen and (min-width: 768px) {  .video-container video {    width: 50%;    height: auto;  }}

接下来，在CSS部分，我们通过设置.video-container的position属性为relative，使其成为相对定位的容器元素。我们将视频的width设置为100%，以使其在容器内占满整个宽度，并将height设为auto，以便根据宽度自适应调整高度。这样，当该视频在手机等较小屏幕上播放时，会自动调整视频大小以适应屏幕大小，从而实现了响应式布局。

在媒体查询部分，我们通过CSS3的@media规则，为屏幕宽度大于等于768px的设备加入一些样式规则，使视频在较大屏幕上呈现出不同的显示效果。我们将视频的width设置为50%，同时保持height自适应，从而实现了视频在大屏幕上的缩放显示效果。

综上所述，通过CSS响应式视频技术，我们可以实现视频在不同设备上的优化播放效果。同时，响应式视频样式代码也可以根据具体项目需要进行完善和扩展，以适应更多的设备和平台。