Html 如何在我自己的视频mp4中添加响应性设计？
我在这个话题上是新手，我的问题是我不能为所有设备调整我自己的视频大小。 既然我需要添加一些代码来进行响应性设计，有人能帮我修复它吗 我的html和CSS代码如下Html 如何在我自己的视频mp4中添加响应性设计？,html,css,responsive-design,Html,Css,Responsive Design,我在这个话题上是新手，我的问题是我不能为所有设备调整我自己的视频大小。 既然我需要添加一些代码来进行响应性设计，有人能帮我修复它吗 我的html和CSS代码如下 <head> <meta charset="utf-8"> <link href="index.css" rel= "stylesheet" type="text/css"> <title>VR Salud</title> <st
<head>
<meta charset="utf-8">
<link href="index.css" rel= "stylesheet" type="text/css">
<title>VR Salud</title>
<style>
html, body { margin: 0; padding:0; overflow: hidden; }
h1 { color:white; position:absolute; top:95%; z-index:100; width:100%; text-align: center;; transform: translate(0,-100%); font-family: 'Raleway', sans-serif; font-weight: 100; letter-spacing: 1px; text-transform: lowercase; font-size: 30px; }
</style>
</head>
<body>
<video width="1920" height="1080" loop id="video_sample">
<source src="VRHealthWeb.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.</p>
</video>
</div>
/*<button id = "btn" onclick = button_action();> Play Here </button>;
<script type="text/javascript">
var store_video = document.getElementById('video_sample');
var btn_store = document.getElementById('btn');
function button_action(){
if(store_video.paused){
store_video.play();
btn_store.innerHTML = "Contacto:hola@vrsalud.com.ar";
}
else {
store_video.pause();
btn_store.innerHTML = "Play Intro";
}
}
</script>
</body>
.container {
position: relative;
}
button
{
position: absolute;
bottom: 2%;
left: 40%;
display: inline-block;
padding: 10px 10px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #00FFFF ;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
萨卢德酒店
html，正文{边距：0；填充：0；溢出：隐藏；}
h1{颜色：白色；位置：绝对；顶部：95%；z索引：100；宽度：100%；文本对齐：居中；变换：平移（0，-100%）；字体系列：“Ralway”，无衬线；字体重量：100；字母间距：1px；文本变换：小写；字体大小：30px；}
您的浏览器不支持HTML5视频
/*在这里玩；
var store_video=document.getElementById（'video_sample'）；
var btn_store=document.getElementById（'btn'）；
功能按钮_动作（）{
如果（存储\u视频。暂停）{
存储视频。播放（）；
btn_store.innerHTML=“联系人：hola@vrsalud.com.ar";
}
否则{
存储视频。暂停（）；
btn_store.innerHTML=“播放介绍”；
}
}
.集装箱{
位置：相对位置；
}
按钮
{
位置：绝对位置；
底部：2%；
左：40%；
显示：内联块；
填充：10px 10px；
字体大小：24px；
光标：指针；
文本对齐：居中；
文字装饰：无；
大纲：无；
颜色：#fff；
背景色：#00FFFF；
边界：无；
边界半径：15px；
盒影：0 9px#999；
}
.按钮：悬停{背景色：#3e8e41}
.按钮：激活{
背景色：#3e8e41；
盒影：0 5px#666；
变换：translateY（4px）；
}
Alejandro既然你的问题是关于响应性的，我想介绍一下被称为引导的东西。Bootstrap是一个CSS框架，允许您构建响应性网站 您必须在节之间导入HTML文件中的链接。如果您想快速导入MaxCDN链接，这里是快速入门链接： （在该链接中向下滚动以查看要导入的引导链接） 步骤1:将引导链接添加到HTML页面 第二步： 对于这段HTML：
<video width="1920" height="1080" loop id="video_sample">
<source src="VRHealthWeb.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.</p>
</video>
您的浏览器不支持HTML5视频
<div class="container">
<video width="1920" height="1080" loop id="video_sample">
<source src="VRHealthWeb.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.</p>
</video>
</div>
您的浏览器不支持HTML5视频