Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Створення та оптимізація сайтів » Блог » faq » Як вставити YouTube відео фоном для сайту?

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

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 15-05-2017, 21:18 896 0
Як вставити 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%; }
}

 

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

 

 
 


Коментарі

⤹ Залишити свій коментар ⤸

  • оновити, якщо не видно коду

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */