Встраиваем случайное видео с Youtube на сайт

Видео оживляет Ваш сайт, улучшает поведенческие факторы. Но одно дело, когда видео иллюстрирует статью и совсем другое дело, если Вы хотите сделать видео-информер, чтобы встроить в шаблон своего сайта. В последнем случае, поведенческие факторы (ПФ) наоборот будут ухудшаться. Дело в том, что видеть заставку одного и того же видео при перемещении по сайту пользователю будет неприятно лицезреть. Что делать? Правильно, реализовать возможность выводить видео рандомно (случайным образом).

Способ 1 на PHP

Можно сделать массив из готовых кодов видео Youtube, поместить их в обычных текстовый файл (каждый код в отдельную строку), пример:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Q6IJR1S7I7E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-2g1eQzkEU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
...

И извлечь их этого массива случайную строчку, разместив на своем сайте (в виджете/сайдбаре) такой PHP код:

<?php
$textfile = "http://ваш.сайт/video.txt";
if ($quotes = @file("$textfile")) {
$quote = rand(0, sizeof($quotes)-1);
echo $quotes[$quote];
}else{
echo ("Нет контента");
}
?>

Данный код реализован по стопам статьи "Создаем информер с случайными данными".

Все было бы хорошо, но такой код недружелюбен со статическим кешированием, которое очень любят включать вебмастера в погоне за высокими показателями "PageSpeed Insights". Если на сайте есть кеш, то такой информер не получится динамическим (обновление страницы в браузере не сгенерирует случайное видео)!

Способ 2 на JavaScript

JavaScript работает на стороне клиента, то есть в браузере пользователя. А это значит, что никакой кеш сайта ему не страшен. Это идеальный сценарий для написания динамичного информера -  случайного видео.

Состоит такой код из 3-е составляющих:

  1. Массив видеофайлов (в формате id видео с сайта Youtube);
  2. Функции получения случайного числа;
  3. Отрисовки iframe (полноценного кода плеера Youtube);

На практике это выглядит следующим образом:

<script>var arr = ["bseQCN2OYjU", "nH0jHmQru78", "pXu1Slvg1gg", "SF4GHiOQ4SE", "PW74tkGAeLM", "YwQ0aVJD45Y", "GL27138WU08", "zMHe3YGJAaU", "NMFjFptPdCU", "zktDidzrXY8", "5sGT82Iq-3w", "LC4INwaXxJ8", "bxthyHwTpXU", "jrg4yP5YWgw", "JEa08wRibLk", "ezf1_AvbNXA", "y-a1eJKvxG8", "FKn0TXYJPJQ", "paNv1ZjpRco", "l0bCcTmJsyU", "qwyX1dcEBk0", "--gPDF2_W10", "Q6IJR1S7I7E", "GC10gUr-wTw", "5XpTSshvWxA", "nLjGG0tZh2o", "_wFR-Dg5Swk"];
var rand = Math.floor(Math.random() * arr.length);
document.write("<iframe seamless width=\"1280\" height=\"720\" src=\"//www.youtube.com/embed/"+arr[rand]+"?wmode=opaque&amp;hd=1&amp;autoplay=0&amp;showinfo=1&amp;controls=2&amp;rel=0\" allowfullscreen></iframe>");
</script>

Такой код выводит в браузере пользователя случайное видео (из предложенного массива) с Youtube. Атрибут seamless в iframe означает, что содержимое фрейма будет отображаться так, словно оно является частью документа. А установленная ширина в width=1280 означает, что видео аккуратно заполнит отведенную ему область экрана.

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (8 голоса, рейтинг: 4,63 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

2 комментарий

  1. says:

    Интересное решение, но почему нет автоматического включения проигрывания как происходит при переходе на ютубовскую страницу с видео? У меня полуился черный квадрат с кнопкой запуска и название клипа. Можно сделать что бы показывалась заставка клипа? Пробовал на тестовой странице.

  2. says:

    прикольная фича)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте ранее:
Что такое крауд-ссылка и где получить ее бесплатно?

Что такое крауд-ссылки? В чем их привлекательность? Кто такие линкбилдеры и кто такой Линкбилдер? На десерт халява - 199 рублей для...

Закрыть