这是一个使用Videojs视频播放器的网站样式代码示例。根据提供的素材内容,可以看到该网站使用了Video.js库来创建一个具有指定尺寸和比例的视频播放器。
具体的样式定义如下:
.video-js
:设置视频播放器的宽度为300像素,高度为150像素。
.vjs-fluid
:用于在响应式布局中使视频播放器占据整个容器的高度。通过设置padding-top
为56.25%,实现自适应高度比例的效果。
.my-video1-dimensions
:设置第一个视频元素的宽度为100像素,高度为100像素。
.my-video1-dimensions.vjs-fluid
:将.vjs-fluid
类应用于.my-video1-dimensions
类,以确保在响应式布局中视频播放器的高度自适应。
.my-video4-dimensions
:设置第四个视频元素的宽度为100像素,高度为100像素。
.my-video4-dimensions.vjs-fluid
:将.vjs-fluid
类应用于.my-video4-dimensions
类两次,以实现两个不同的高度比例效果。第一次设置的比例为56.666666666666664%,第二次设置的比例为66.66666666666666%。
这些样式定义使得网站上的视频播放器能够根据不同设备和屏幕大小进行自适应调整,并提供一致的用户体验。