Антон

Enables adaptive height for single slide horizontal carousels.

https://jsfiddle.net/xfaq5y7d/1/

.menu ul li:hover a

Берете slick JS - хороший слайдер, карусель... в дополнение, для увеличения и галереи вешаете LightGallery

https://jsfiddle.net/hcqfoy0v/

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

Вы загружаете тот или иной контент по требованию, например, в случае выше - вы скроллите ленту и фотографии подгружается только тогда, когда вы доскроллили до этого элемента, и здесь выступает обычный аякс, остлеживание положения скролла и другие события, которые позволяют определить, был ли достигнут тот или иной момент, когда требуется загрузить контент.
Всё

https://jsfiddle.net/jdmuung4/

$limit = 4;
$link_video_id = array();
for ($i=1; $i<=$limit; $i++) {
  
$link_video_id[$i] = $res->items[$i]->id->videoId;
  
echo "
<div class=\"video_block_". $i . "\">
<iframe width=\"100%\" height=\"315\" src=\"https://$link_video_id[$i]\" frameborder=\"0\"></iframe>
</div>";
}