Нужна помощь с CSS !

Тема в разделе "Другие языки", создана пользователем Крымчанин, 2 ноя 2019.

Метки:
  1. Крымчанин

    Крымчанин Создатель

    Регистр.:
    10 мар 2019
    Сообщения:
    22
    Симпатии:
    8
    Доброе время суток !
    Недавно столкнулся с интересной задачей: в шапку сайта установить видео в качестве фона на движок PageKit .
    Подскажите пожалуйста мне популярно как это воплотить в реальность.
    Меня интересует сам код и пошаговый принцип реализации.
    Видео будет хранится на Youtu.be

    Буду безгранично вам благодарен
     
  2. ultra

    ultra

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    239
    Симпатии:
    381
  3. Крымчанин

    Крымчанин Создатель

    Регистр.:
    10 мар 2019
    Сообщения:
    22
    Симпатии:
    8
    Как это вставить в сайт
    Объясните пожалуйста
     
  4. Dolvee

    Dolvee Создатель

    Регистр.:
    24 июн 2019
    Сообщения:
    4
    Симпатии:
    0
    В исходном коде сайта ( в корневом каталоге найдите главную страницу ) и вставьте код, который вам прислали выше, только измените ссылку видео на свою
     
  5. Скинфера

    Скинфера Писатель

    Регистр.:
    28 сен 2019
    Сообщения:
    4
    Симпатии:
    1
    Залетаешь на сервер, открываешь htdocs с файлами.


    Переходишь в папку modules\theme\css\theme.css и добавляешь в самый низ theme.css это:

    Код:
    * { box-sizing: border-box; }
    .video-background {
      background: #000;
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -99;
    }
    .video-foreground,
    .video-background iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    #vidtop-content {
        top: 0;
        color: #fff;
    }
    .vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
    .vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
    .vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
    @media (min-aspect-ratio: 16/9) {
      .video-foreground { height: 300%; top: -100%; }
    }
    @media (max-aspect-ratio: 16/9) {
      .video-foreground { width: 300%; left: -100%; }
    }
    @media all and (max-width: 600px) {
    .vid-info { width: 50%; padding: .5rem; }
    .vid-info h1 { margin-bottom: .2rem; }
    }
    @media all and (max-width: 500px) {
    .vid-info .acronym { display: none; }
    }
    



    Далее переходишь в modules\theme\views\template.php, открываешь этот template.php, и после тега <body> до <header id="header" class="tm-header"> (между ними) попробуй добавить это:

    Код:
    <div class="video-background">
        <div class="video-foreground">
          <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    


    По результатам отпишись :)