时间戳

首页 > 解决方案 > 如何在我自己的视频 mp4 中添加响应式设计？

html - 如何在我自己的视频 mp4 中添加响应式设计？

问题描述

我是这个主题的新手，我的问题是我无法为所有设备调整自己的视频大小。由于我需要添加一些代码来进行响应式设计，有人可以帮我修复它吗？

我的 html 和 CSS 代码如下

  <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);

}

感谢您的帮助，并为我的小英语感到抱歉...最好的问候亚历杭德罗

标签： htmlcssresponsive-design

解决方案

由于您的问题是关于响应能力的，我想说明一下称为Bootstrap的东西。Bootstrap 是一个 CSS 框架，可让您构建响应式网站。

您必须在部分之间的 HTML 文件中导入链接。如果您想快速导入MaxCDN链接，请使用以下快速链接：W3Schools Bootstrap 链接 （在该链接中向下滚动以查看要导入的 Bootstrap 链接）

第 1 步：将引导链接添加到您的 HTML 页面

第2步：

对于这段 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>

你可以添加这个：

<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>

它能做什么？

Container基本上是一个引导类名，它自动添加填充和 HTML 控件。虽然这不是增加响应能力的唯一方法，但我已经向您展示了它的快速方法。尝试调整浏览器窗口的大小，然后查看效果。

在此之后，您将需要一些 CSS 类来添加到您的样式表中。这是向 HTML 控件添加快速响应的最简单方法。

希望这可以帮助。

推荐阅读