Как добавить отзывчивый дизайн в моем собственном видео mp4? - PullRequest
Новая
       2

Как добавить отзывчивый дизайн в моем собственном видео mp4?

0 голосов
/ 26 октября 2019

Я новичок в этой теме, и моя проблема в том, что я не могу изменить размер собственного видео для всех устройств. Так как мне нужно было бы добавить код для адаптивного дизайна, может ли кто-нибудь помочь мне исправить это?

Мой 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);

}

Спасибо за вашу помощь и извинитеза мой маленький английский ... С наилучшими пожеланиями Алехандро

Ответы [ 2 ]

1 голос
/ 26 октября 2019

Поскольку ваш вопрос касается отзывчивости, я хотел бы остановиться на том, что называется Bootstrap . Bootstrap - это CSS-фреймворк, позволяющий создавать адаптивные веб-сайты.

Вы должны импортировать ссылки в вашем HTML-файле между разделами. Вот быстрая ссылка, чтобы начать работу, если вы хотите быстро импортировать ссылки MaxCDN : W3Schools Bootstrap Link (прокрутите эту ссылку вниз, чтобы увидеть ссылки 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>

Что он делает?

Контейнер - это в основном имя класса начальной загрузки, которое добавляетзаполнение и элемент управления HTML автоматически. Хотя это не единственный способ добавить отзывчивость, я показал вам быстрый рецепт этого. Попробуйте изменить размер окна браузера, а затем просмотрите эффект.

После этого вам потребуется несколько классов CSS для добавления в таблицу стилей. Это самый простой способ добавить быструю реакцию на элементы управления HTML.

Надеюсь, это поможет.

0 голосов
/ 26 октября 2019

Во-первых, спасибо за помощь !!! С другой стороны, я добавил код, который вы сказали мне, в мой HTML-файл, и я не вижу реакции. Конечно, я делаю ошибку или я что-то забыл ... Я также добавил в свой проект папку bootstrap-4.3.1-dist ... Теперь HTML-код выглядит следующим образом: 

  <head>
    <meta charset="utf-8">
    <link href="index.css" rel= "stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <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>


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

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

Дляэто и извините за мое невежество, но не могли бы вы помочь мне с этим снова? Спасибо за ваше время Алехандро

...