为什么我的嵌入式和响应式视频没有响应?
Why is my embedded & responsive video not responsive?
我有一个视频要在 4 列的所有屏幕尺寸(xs 除外)中显示。下面的代码没有响应,显示的视频非常大。头发掉光了,需要帮助!
<div class="hidden-xs col-sm-4 embed-responsive-16by9">
<video class="embed-responsive-item" title="Former Balmain Massage therapist Blaise Bowling shows the ins and outs of pregnancy massage" poster="../../images/blaises_pregnancy_poster.jpg" controls src="../../video/pregnancy360.mp4" type="video/mp4">
</video>
</div>
原始视频只有 360px 宽,而且渲染得太大了...页面位于 https://balmainmassage.com.au/2015/modalities/pregnancy.html
谢谢
克劳迪奥
在你的 html
中,我假设你在 <head>
中有这个:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
您应该将您的视频放在 <div>
中,如下所示:
<div class="responsive_video">
<video src="yourfolder/yourvideo.mp4" controls="controls" type="video/mp4" </video>
</div>
然后,您应该在 css
底部的 @media only screen and (max-width : 960px)
下放置它:
@media only screen and (max-width : 960px) {
.responsive_video video{
width:100%;
}
}
我有一个视频要在 4 列的所有屏幕尺寸(xs 除外)中显示。下面的代码没有响应,显示的视频非常大。头发掉光了,需要帮助!
<div class="hidden-xs col-sm-4 embed-responsive-16by9">
<video class="embed-responsive-item" title="Former Balmain Massage therapist Blaise Bowling shows the ins and outs of pregnancy massage" poster="../../images/blaises_pregnancy_poster.jpg" controls src="../../video/pregnancy360.mp4" type="video/mp4">
</video>
</div>
原始视频只有 360px 宽,而且渲染得太大了...页面位于 https://balmainmassage.com.au/2015/modalities/pregnancy.html
谢谢
克劳迪奥
在你的 html
中,我假设你在 <head>
中有这个:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
您应该将您的视频放在 <div>
中,如下所示:
<div class="responsive_video">
<video src="yourfolder/yourvideo.mp4" controls="controls" type="video/mp4" </video>
</div>
然后,您应该在 css
底部的 @media only screen and (max-width : 960px)
下放置它:
@media only screen and (max-width : 960px) {
.responsive_video video{
width:100%;
}
}