YouTubeを埋め込みしたページの高速化とChromeにてワンクリックで自動再生を実現したい

前提・実現したいこと

下記のサイトを参考にYouTubeをページへ埋め込んでもページの読み込み速度が遅くなりにくいという方法を試しました。

YouTubeから取得したサムネイル画像をクリックすると動画が再生されうまく動作したのですが、
Chrome（バージョン: 80.0.3987.149）で動作確認を行ったところ、自動再生がされませんでした。

記載させていただきましたjqueryのコードに自動再生のプログラムを追加しChromeでも自動再生されるようにしたいと思いこちらにてご質問させていただきました。

初めての投稿で不慣れではございますが、ご指導・アドバイス等頂けましたら幸いでございます。
お手数をおかけ致しますが、何卒よろしくお願い申し上げます。

参考サイト：https://www.notitle-weblog.com/entry/2016/05/21/155650

発生している問題・エラーメッセージ

Chrome（バージョン: 80.0.3987.149）でサムネイル画像をクリックしても自動再生されない
ただし、クリック後に再度クリックすると再生は行われます

FireFOX（バージョン：74.0）、IE（バージョン：11.719.18362.0）では、ワンクリックで自動再生が行われました

該当のソースコード

jquery
1<script>// <![CDATA[
2$('.youtube').click(function(){
3video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
4$(this).replaceWith(video);
5});
6// ]]></script>

HTML
1<div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"><img src="https://img.youtube.com/vi/動画ID/maxresdefault.jpg" alt="" /></div>

CSS
1.youtube {
2	display: inline-block;
3	position: relative;
4	overflow: hidden;
5	width: 100%;
6	height: 100%;
7}
8.youtube::before { /* YouTubeアイコン */
9  position: absolute;
10  background: url(yt_icon_rgb.png);
11  content: "";
12  background-size: 100%;
13  width: 70px;
14  height: 50px;
15  top: 50%;
16  left: 50%;
17  transform : translate(-50%,-50%);
18  opacity: .90;
19  transition:.5s;
20}
21 
22.youtube:hover::before { /* YouTubeアイコン */
23  cursor: pointer;
24  background-image:url(yt_icon_mono_light.png);
25  content: "";
26  background-size: 100%;
27  width: 70px;
28  height: 50px;
29  top: 50%;
30  left: 50%;
31  transform : translate(-50%,-50%);
32  opacity: .90;
33  transition:.5s;
34}
35