Very often the task is to make as quickly as possible loading pages on which there is a large number of videos from youtube, for example, as reviews.
Even one video embedded through the iframe into the page greatly slows down its loading and scares off your potential customers.

[spoiler title='Some tests]

Two blank pages were created.
On one of them, an iframe without the autoplay parameter was simply inserted so that the user had to click on the video to start it.
The same video was inserted on another; the code with the stub was completely copied from here, from this article. Also, to start the video, the user had to click on the video.

The Internet is stable and not jerky. Pages loaded without caches and everything else.

A page with a clean iframe loaded on average 0.257 seconds .
A page with a "muffled" iframe loaded on average 0.105 seconds .

This is faster than a clean e-frame even more than twice!
And imagine what will happen if there are ten such frames on the page?

[/spoiler]

Optimization looks strange, but it works. Instead of a video, you need to hang a stub-picture, when clicked, the iframe will be embedded with the autoplay parameter.
I will not do adaptive so as not to stretch the article too much.

First of all, you need to get the cover of the video for the stub.
We take the link for the desired video and pull out the video identifier, for example
https://www.youtube.com/watch?v= ID-VIDEO
We need only the selected part.
The cover link to the maximum size will be:
https://img.youtube.com/vi/ ID-VIDEO /maxresdefault.jpg

We also need an image of the play button. I won’t tell you how to get it, but you can use this:

And put it all together. We also create a function that will insert a YouTube frame with the autoplay parameter into our container.

<style>
.video1 {
    width: 260px;
    height: 150px;
    position: relative;
    border: 1px solid #000;
    background: url(//img.youtube.com/vi/ID-VIDEO/maxresdefault.jpg)  0% 0% / cover;
}
.video1-play {
    background-image: url(//evilcoder.ru/wp-content/uploads/2018/01/play.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 60px;
    width: 90px;
    top: 50%;
    left: 50%;
    margin-left: -45px;
    margin-top: -30px;
    position: absolute;
    border-radius: 21px;
    background-position: 50% 50%;
    cursor: pointer;
}
.video1-play:hover {
      box-shadow: 0 0 12px 0 #000;
}
</style>

<script>
function videoplay(button) {
    var par = button.parentNode;
    par.innerHTML = '<iframe src="//www.youtube.com/embed/ID-VIDEO?autoplay=1" scrolling="no" style="width: 100%; height: 100%;" allow="autoplay"></iframe>';
}
</script>

<div class="video1">
    <div class="video1-play" onclick="videoplay(this);"></div>
</div>

It will look something like this:

Everything was done as simple as possible in order to show the very method of page acceleration due to rejection of e-frames, the written code is working, but very far from ideal.