Адаптивная загрузка видео на основе ширины экрана может быть реализована с использованием HTML и элемента `<source>` внутри `<video>`. Элемент `<source>` позволяет указать несколько источников видео для разных условий, и в сочетании с атрибутом `media`, можно определить, какие видео будут загружены в зависимости от заданных медиа запросов.
Вот пример того, как это можно сделать:
```html
<video controls>
<source src="video_hd.mp4" type="video/mp4" media="all and (min-width: 720px)">
<source src="video_sd.mp4" type="video/mp4" media="all and (max-width: 719px)">
<!-- Видео для браузеров, не поддерживающих HTML5 -->
<p>Your browser does not support HTML5 video.</p>
</video>
```
В этом примере, если ширина экрана равна или больше 720 пикселей, будет загружено HD видео (video_hd.mp4). Если ширина экрана меньше 720 пикселей, то браузер отдаст предпочтение SD видео (video_sd.mp4). Элемент `<video>` попытается загрузить первый `<source>`, который соответствует условиям медиа запроса и поддерживается браузером.
Обратите внимание, что поддержка разных форматов видео (типов MIME) может различаться в разных браузерах, поэтому важно включать альтернативные форматы для максимальной совместимости.
Для дополнительной оптимизации вы можете использовать тег `<picture>` с подкатегорией `<source>`, который позволяет подобным образом указывать различные изображения для разных условий, хотя он обычно применяется для изображений, а не для видео. Однако, здесь перечисленный метод с тегом `<video>` и элементами `<source>` обычно является предпочтительным для загрузки различных версий видеофайлов.