ufo-sait
» » » Як вставити YouTube відео фоном для сайту?
----

За допомогою звичайних HTML5 та CSS можна встановити відео з YouTube в якості фонового малюнка сторінки без використання JS або спеціальної розмітки.

html  код дуже простенький:

<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" allowfullscreen></iframe>
    </div>
</div>

Параметри для відео, обов'язково в такому порядку:

css розмітка для відео:

.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;
}

 

Даний код розтягує відео на всю сторінку, еквівалент background-size: cover для iframe. А pointer-events: none робить так, щоб при правому кліку миші не показувалося контекстне меню YouTube. Залишилося трохи доповнити CSS медіа запитами для співвідношення сторін (У мобільній версії буде показуватись центр відео):

@media (min-aspect-ratio: 16/9) {
    .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .video-foreground { width: 300%; left: -100%; }
}

 

При такому способі не можна поставити відео на паузу та вимкнути звук.

 



Коментарі:

Залишити свій коментар:
    • winkwinkedsmileambelayfeelfellow
      laughinglollovenorecourserequestsad
      tonguewassatcryingwhatbully
Портфоліо
Все разом Сайти ГрафікаЛоготипи Відео
Створенні сайтиРозкішна декоративна штукатурка Розкішна декоративна штукатурка
Створенні сайтиКомпанія - Нова ванна Компанія - Нова ванна
Створенні сайтиРеставрація ванн в домашніх умовах Реставрація ванн в домашніх умовах
Створенні сайтиРеставрація ванн Тернопіль Реставрація ванн Тернопіль
Створенні сайтиМагазин дитячих ліжечок Магазин дитячих ліжечок
Створенні сайтиІнтернет магазин сувенірів Інтернет магазин сувенірів
Створенні сайтиСайт для виробника ущільнювачів Сайт для виробника ущільнювачів
Створенні сайтиСайт - замовити відеоператора - розробка з анімацією Сайт - замовити відеоператора - розробка з анімацією
Створенні сайтиТорти на замовлення - розробка сайту Торти на замовлення  - розробка сайту

Багато підприємців відтягують створення сайту: немає часу, немає грошей, немає впевненості, що це принесе клієнтів і дохід. Насправді, розвиток бізнесу за допомогою сайтів та соціальних мереж, ефективний і надійний спосіб залучення потенційних клієнтів та просування свого товару.

Перед тим як створити сайт, спочатку буде проаналізовано ринок, ваших конкурентів та можливості щодо виведення сайту в ТОП. Сторінка пришвидшення індексації

Ми проведемо SEO оптимізацію, налаштуємо групи в соцмережах та знайдемо в Мережі цільову аудиторію, яка бажає придбати Ваші товари та послуги.

Головна перевага наших послуг: виготовлення веб-сайту під ключ в місті: Хмельницький, Тернопіль, Кам’янець-Подільський. Побудова і верстка дизайну, підключення системи управління та домену, розміщення на хостингу і наповнення сторінок - всі клопоти беремо на себе .