iframe без тормозов

iframe-video-map-another

Добавление на страницу iframe, которое не тормозит загрузку сайта

https://www.youtube.com/oembed/?url=https://www.youtube.com/watch?v=hpxW2wIevgQ&format=json

{
    "title":"\u00ab\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u0435\u043b\u044c v2.0\u00bb \u2014 \u043e\u043d\u043b\u0430\u0439\u043d \u0442\u0435\u0441\u0442 \u043b\u044e\u0431\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0431\u0443\u043a\u043c\u0430\u0440\u043a\u043b\u0435\u0442\u044b \u043f\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 SEO-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0430\u0439\u0442\u0430.",
    "author_name":"\u041c\u0438\u0445\u0430\u0438\u043b \u041d\u043e\u0441\u043e\u0432 \u2014 \u0423\u043b\u0443\u0447\u0448\u0430\u0442\u0435\u043b\u044c \u0441\u0430\u0439\u0442\u043e\u0432",
    "author_url":"https://www.youtube.com/@WebSEOkz",
    "type":"video",
    "height":113,
    "width":200,
    "version":"1.0",
    "provider_name":"YouTube",
    "provider_url":"https://www.youtube.com/",
    "thumbnail_height":360,
    "thumbnail_width":480,
    "thumbnail_url":"https://i.ytimg.com/vi/hpxW2wIevgQ/hqdefault.jpg",
    "html":"\u003ciframe width=\u0022200\u0022 height=\u0022113\u0022 src=\u0022https://www.youtube.com/embed/hpxW2wIevgQ?feature=oembed\u0022 frameborder=\u00220\u0022 allow=\u0022accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\u0022 allowfullscreen title=\u0022\u00ab\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u0435\u043b\u044c v2.0\u00bb \u2014 \u043e\u043d\u043b\u0430\u0439\u043d \u0442\u0435\u0441\u0442 \u043b\u044e\u0431\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0431\u0443\u043a\u043c\u0430\u0440\u043a\u043b\u0435\u0442\u044b \u043f\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 SEO-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0430\u0439\u0442\u0430.\u0022\u003e\u003c/iframe\u003e"
}

При вышеописанной технологии, поисковые системы не видят видео на странице.

Если видео в пределах первого экрана, то используем вышеописанную технологию с применением разметки Schema.org

content-visibility: auto;

Работает только для видео за пределами первого экрана.

<style>
    .wsytcontainer {
        container-type: inline-size;
        container-name:youtubei;
        width:100%;
    }
    .wsytblock {
        /*width: clamp(320px, 100cqw, 520px);*/
        /*height: clamp(180px, 56.25cqw, 293px);*/
        /*margin: 0 auto;*/
        width: 100cqw;
        height: 56.25cqw;
        contain: layout;
        content-visibility: auto;
        contain-intrinsic-width: 100cqw;
        contain-intrinsic-height: 56.25cqw;
    }
    .wsytiframe {
        border: none;
        width: 100%;
        height: 100%;
    }
</style>

<div class="wsytcontainer">
    <div class="wsytblock">
        <iframe class="wsytiframe"  loading="lazy" src="...
    </div>
</div>