Skip to content

Instantly share code, notes, and snippets.

@aktaumag

aktaumag/iframe-video-map-another

Created September 30, 2020 23:52
Show Gist options
  • Save aktaumag/384a65e7e49045dc28cd4b3ee659d3a7 to your computer and use it in GitHub Desktop.
Save aktaumag/384a65e7e49045dc28cd4b3ee659d3a7 to your computer and use it in GitHub Desktop.
Download ZIP
iframe без тормозов
Raw
iframe-video-map-another
Добавление на страницу iframe, которое не тормозит загрузку сайта
@aktaumag
Copy link
Author

aktaumag commented Oct 1, 2020 •
edited
Loading

ПРИМЕР с картой гугла:

Стандартный IFRAME

<iframe allowfullscreen="" frameborder="0" width="770" height="300" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2248.108948031292!2d37.569583315928654!3d55.70447798054036!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54c82f5b6923d%3A0xf29abcaf64d341c7!2z0JvQtdC90LjQvdGB0LrQuNC5INC_0YAuLCAzOCwg0JzQvtGB0LrQstCwLCAxMTkzMzQ!5e0!3m2!1sru!2sru!4v1446803952401" style="border:0"></iframe>

Оптимизированный

<iframe srcdoc="<head style='display:none;'><style style='display:none;'>*{padding:0;margin:0;box-sizing:border-box;display:block;width:100%;height:100%}</style></head><body><a href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2248.108948031292!2d37.569583315928654!3d55.70447798054036!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54c82f5b6923d%3A0xf29abcaf64d341c7!2z0JvQtdC90LjQvdGB0LrQuNC5INC_0YAuLCAzOCwg0JzQvtGB0LrQstCwLCAxMTkzMzQ!5e0!3m2!1sru!2sru!4v1446803952401'><img src='/images/ws-gmap.jpg'/></a></body>" allowfullscreen="" frameborder="0" width="770" height="300" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2248.108948031292!2d37.569583315928654!3d55.70447798054036!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54c82f5b6923d%3A0xf29abcaf64d341c7!2z0JvQtdC90LjQvdGB0LrQuNC5INC_0YAuLCAzOCwg0JzQvtGB0LrQstCwLCAxMTkzMzQ!5e0!3m2!1sru!2sru!4v1446803952401" style="border:0"></iframe>

Суть:
В параметре srcdoc передаём код документа, который загрузится сразу. В этом коде картинка на превьюшку обёрнутая в ссылку на сам атрибут src

ПРИМЕР с видео YouTube

Стандартный IFRAME

<iframe width="560" height="315" src="https://www.youtube.com/embed/vH2HTdQNPr4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Код страницы с превью и стилями кнопки PLAY:

<head style='display:none;'>
    <style style='display:none;'>
        *{
            padding:0;
            margin:0;
            box-sizing:border-box;
            display:block;
            width:100%;
            height:100%
        }
        a:before,
        a:after{
            position: absolute;
            content: '';
            left: 50%;
            top: 50%;
        }
        a:before{
            margin: -4.9% 0 0 -7%;
            background: rgba(31,31,30,.8);
            padding-top: 9.8%;
            width: 14%;
            border-radius: 16% / 27%;
        }
        a:after{
            margin: -1.9vw 0 0 -1vw;
            border: 2vw solid transparent;
            border-left: 3.8vw solid #fff;
        }
        a:hover:before{
            background: #c0171c;
        }
    </style>
</head>
<body>
    <a href='https://www.youtube.com/embed/vH2HTdQNPr4?autoplay=1'>
        <img src='https://img.youtube.com/vi/vH2HTdQNPr4/maxresdefault.jpg' alt=''>
    </a>
</body>

Итог кода для вставки

<iframe width="560" height="315" srcdoc="<head><style>*{padding:0;margin:0;box-sizing:border-box;display:block;width:100%;height:100%}a:before,a:after{position: absolute;content: '';left: 50%;top: 50%}a:before{margin: -4.9% 0 0 -7%;background: rgba(31,31,30,.8);padding-top: 9.8%;width: 14%;border-radius: 16% / 27%}a:after{margin: -1.9vw 0 0 -1vw;border: 2vw solid transparent;border-left: 3.8vw solid #fff}a:hover:before{background: #c0171c}</style></head><body><a href='https://www.youtube.com/embed/vH2HTdQNPr4?autoplay=1'><img src='https://img.youtube.com/vi/vH2HTdQNPr4/maxresdefault.jpg' alt=''></a></body>" src="https://www.youtube.com/embed/vH2HTdQNPr4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

@aktaumag
Copy link
Author

aktaumag commented May 29, 2023 •
edited
Loading

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"
}

@aktaumag
Copy link
Author

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

Если видео в пределах первого экрана, то используем вышеописанную технологию с применением разметки 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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment