fancybox загружает весь контент на страницу загрузки

Я использую fancybox в сочетании с небольшой самодельной CMS.
Пользователи могут загрузить фильм на сервер с заголовком, информацией и большим пальцем. и скрипт ниже печатает все большие пальцы на странице. и все видео на экране — нет делений, которые отображаются при щелчке правой кнопкой мыши следующим образом:

<?php

$query = "SELECT * FROM movies";

if ($result = $mysqli->query($query)) {
/* fetch associative array */
while ($row = $result->fetch_assoc()) {

//prints out all the thumbs on the main page:

echo ' <a class="various" href="#inline'.$row['id'].'" title="'.$row['info'].'">
<div data-content="'.$row['titel'].'" data-html="true" class="image">
<img src="thumbs/'.$row['thumb'].'" alt="" />
</div>
</a>';

//generates all the video's. whenver the link with inline 1 is clicked above. the video with inline 1 will show up
echo '<div style="display: none;">
<div id="inline'.$row['id'].'">
<video width="720" height="480" controls>
<source src="movies/'.$row['movie'].'" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>';
}}

?>

Это все работает нормально, когда у меня есть 4 видео на странице. Но как только я показываю 12 видео на каждой странице, буферизация идет очень медленно. поэтому первые несколько видео загрузятся нормально. но когда вы пытаетесь посмотреть, скажем, 8-е видео, вам придется долго ждать, потому что оно буферизует семь перед 8-м первым.

Итак, мой вопрос. в любом случае, можно только начать загружать видео, на которое нажимают?

мой модный ящик JS:

  <script type="text/javascript">
$(document).ready(function() {

$(".various").fancybox({
'titlePosition'        : 'inside',
'transitionIn'        : 'none',
'transitionOut'        : 'none'
});

});
</script>

надеюсь, кто-нибудь может мне помочь!

ПРИМЕЧАНИЕ. Чтобы предотвратить прямую загрузку видео, можно указать элемент video:

preload="none"

Но я предпочитаю, чтобы видео воспроизводилось автоматически при каждом открытии, так что это не вариант.