movie in background login page?

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • movie in background login page?

      Hi dude ;)
      How can I use short .mp4 movie on login page in 2moons.
      In html i know, but on .php i dont.
    • heres what i have the video is an example i placed in the footer

      <video autoplay loop id="video-background" muted plays-inline>
      <source src="https://player.vimeo.com/external/158148793.hd.mp4?&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
      </video>

      css in the beginning

      }
      .qtip *{
      padding:0;
      margin:0;
      }
      html{
      width:auto;
      padding:0;
      margin:0;
      }

      /* The only rule that matters */
      #video-background {
      background:#000111 url(../images/bg.jpg)repeat;
      /* making the video fullscreen */
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      }

      /* These just style the content */
      article {
      /* just a fancy border */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 10px solid rgba(255, 255, 255, 0.5);
      margin: 10px;
      }

      h1 {
      position: absolute;
      top: 60%;
      width: 100%;
      font-size: 36px;
      letter-spacing: 3px;
      color: #fff;
      font-family: Oswald, sans-serif;
      text-align: center;
      }

      h1 span {
      font-family: sans-serif;
      letter-spacing: 0;
      font-weight: 300;
      font-size: 16px;
      line-height: 24px;
      }

      h1 span a {
      color: #fff;
      }
      }
      body.full{
      min-width:1000px;
      }
      img{
      border:none;
      }
      a{
      font-weight:normal;
      color: #fff;
      text-decoration:none;
      }

      a:hover{
      color:#5ca6aa;
      }
      a span.active_page{
      color:#066;
      cursor:default;
      }
      :focus{ outline: 0; }
      /* Headings */
      h1{
      }
      h2{
      }
      h3{
      }
      h4{
      }
      h5{
      }
      h6{
      }
      ::-webkit-input-placeholder { /* WebKit browsers */
      color: #666;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #666;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #666;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #666;
      }
      input[type=checkbox]{
      cursor:pointer;
      }
      /*clear*/
      .clear{
      clear:both;
      }
    • а зачем столько много кода :)
      если н ановой ветке добавьте одно общее правило в main.css
      если нужен порядок и слой - создайте класс

      а вот сама загрузка -
      <video class="bgvideo" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
      <source src="media/video/ваш ролик.mp4" type="video/mp4"> </source> </video>

      class="bgvideo" в этом классе создайте правило для всех устройств! если как говорите знаете что такое каскадные стили добавите - три строки кода в стилях и вы получите показ видео с подгонкой под любой экран и под любое разрешение
    • но походу не знаете ) ловите такая конструкция будет работать на любом устройстве и браузере .. это моя старая конструкция еще со старого проекта.. на данный момент я свою вывожу скриптом так делаю события
      вариант №1
      bgvideo {
      width: auto;
      height: auto;
      position: fixed; //тут смотря какие задачи если не нужен фикс то ставим absolute
      top: 0px;// можно убрать мне нужно было
      left: 0px; // можно убрать мне нужно было
      min-width: 100%;
      min-height: 100%;
      z-index: 0; // можно убрать мне нужно было
      opacity: 0.2; // можно убрать мне нужно было
      }

      вариант№2
      bgvideo {
      background-size: cover;
      position: fixed;
      }

      можно так )))

      есть вариант на одну строку но там написан мой личный тег и поддерживаться только на моем домене

      хотя от видео рекомендую отходить.. проще сделать на юнити и сделать на основе подгрузку в виде скрипта с кликами сразу в одной системе )) проще не будет но будет оригинально )) в блоке видео не надо добавлять предпоказ картинок сам блок видео держит такой и показывает первый кадр.. в футер глупо такое размещать будет грузить все страницы ставьте там где надо , если нужно на всех то можно проще сделать через ид указать когда что выводить и там где надо

      The post was edited 7 times, last by Shandow ().

    • ya i changed it to

      /* The only rule that matters */
      #video-background {
      background:#000111 url(../images/bg.jpg)repeat;
      /* making the video fullscreen */
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      }

      /* These just style the content */
      article {
      /* just a fancy border */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 10px solid rgba(255, 255, 255, 0.5);
      margin: 10px;
      }

      h1 {
      position: absolute;
      top: 60%;
      width: 100%;
      font-size: 36px;
      letter-spacing: 3px;
      color: #fff;
      font-family: Oswald, sans-serif;
      text-align: center;
      }

      h1 span {
      font-family: sans-serif;
      letter-spacing: 0;
      font-weight: 300;
      font-size: 16px;
      line-height: 24px;
      }

      h1 span a {
      color: #fff;
      }
    • я понял не слепой что там стили

      но так ведь короче ?

      bgvideo {
      background-size: cover;
      position: fixed;
      }



      достаточно этого,а картинка самим видео первый кадр будет.. зачем еще картинку подгружать ?