Встраиваем случайное видео с 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 означает, что видео аккуратно заполнит отведенную ему область экрана.