Запретить загрузку нескольких фреймов на мобильный

Question

Я настраиваю веб-сайт клиента. Он загружает несколько видео из Vimeo в iframes. На мобильном телефоне это представляет проблему, так как загрузка страницы занимает много времени. Я не хотел бы загружать их на мобильный.

Моя проблема в том, что я понял, как остановить загрузку для одного iframe, используя следующий скрипт:

<script>
if (window.matchMedia("(min-width: 720px)").matches) {
  let iframe = document.getElementById('iframe-1')
  iframe.src = iframe.getAttribute('data-src')
}
</script>

Что мне нужно сделать, чтобы выбрать все фреймы на странице?

Answer 1

Вы можете использовать document.querySelectorAll('iframe') для выбора всех фреймов.

Он вернет вам NodeList (не обычный массив).

Вы можете перебрать его и выполнить замену атрибута.

const iframes = document.querySelectorAll('iframe');
Array.from(iframes).forEach((iframe) => {
  iframe.src = iframe.getAttribute('data-src')
});