Делаем видео-фон для регистрации | Разработка игровых платформ
  1. Доброго времени суток. В связи с появлением спамеров, активация функций новых пользователей (Создавать темы, писать сообщения), теперь будет только после проверки администратором! Для регистрации отписываемся в лс, в вк. vk.com/tehnik777 (Пишем только с реальных страниц)
    Скрыть объявление

Делаем видео-фон для регистрации

Тема в разделе "Гайды/Мануалы", создана пользователем Zloy_Enot, 31 окт 2016.

Обсуждение темы Делаем видео-фон для регистрации в разделе Гайды/Мануалы на форуме zetta-forum.ru.

  1. Zloy_Enot

    Zloy_Enot Модератор

    Регистрация:
    31 окт 2016
    Сообщения:
    26
    Симпатии:
    13
    Баллы:
    3
    Пол:
    Мужской
    Адрес:
    Калининград
    Для начала нам нужно видео которое хотим видеть в качестве фона!

    Берём наше видео и конвертируем в 3 разных формата! Это нужно для нормального отображения нашего видео в разных браузерах!
    .mp4
    .webM
    .ogg

    Далее добавляем следующий код сразу после тега <body> в страницу на которой будет наш видео-фон, у меня это index.php

    PHP:
    <video class="bgvideo" id="bgvideo" preload="auto" autoplay="true" loop="loop">
          <    source  src="/video/namevideo3.mp4" type='video/mp4'>
          <    source  src="/video/namevideo3.webm" type='video/webm'>
          <    source  src="/video/namevideo3.ogg" type='video/ogg'>
    </    video>
    Там где указано в коде namevideo3 это название нашего видеофайла который мы поместим в папку под название video !

    Далее редактируем наш файл .css который содержит стили нашего сайта у меня это style.css !

    Добавляем в него следующий код

    Код:
    html, body{
background-size: cover;
}

.bgvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -9999;
}
    Внимание! Так как в вашем .css файле уже наверняка есть html, body настройки например у меня это выглядит примерно так!

    Код:
    html, body{
margin: 0;
padding: 0;
overflow: hidden;
background-size: cover;
/*background-color: #000000;*/
background-repeat: no-repeat;
background-position: center top;
/*background-image: url('../image/ff.jpg');*/
}
.bgvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -9999;
}
    Строки background-color и background-image закоментированны ! Либо их можно просто удалить!

    Ну вроде всё, сохраняем наши отредактированные файлы и закидываем обратно на хостинг!
     
    Zloy_Enot, 31 окт 2016
    #1
  2. test

    test Постоялец

    Регистрация:
    25 май 2022
    Сообщения:
    120
    Симпатии:
    0
    Баллы:
    16
    test, 26 май 2022
    #2

Поделиться этой страницей