Для верстки - Запускаем ролик при клике на заглушку

Картинка-заглушка для ролика YouTube

// HTML


<div class="spawnElement">
							<div class="overflow"></div>
                            <span class="play_video">
<svg width="83" height="59" viewBox="0 0 83 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M81.1683 9.32124C80.6922 7.56574 79.7635 5.96531 78.4748 4.67932C77.186 3.39333 75.582 2.46664 73.8227 1.99153C67.3816 0.23877 41.4586 0.23877 41.4586 0.23877C41.4586 0.23877 15.5343 0.291825 9.09326 2.04459C7.33385 2.51972 5.72989 3.44646 4.4411 4.73251C3.15231 6.01857 2.22366 7.61906 1.74763 9.37461C-0.200632 20.7938 -0.956399 38.1939 1.80113 49.1563C2.27721 50.9118 3.20588 52.5122 4.49467 53.7982C5.78345 55.0842 7.38739 56.0109 9.14675 56.486C15.5878 58.2388 41.5115 58.2388 41.5115 58.2388C41.5115 58.2388 67.4348 58.2388 73.8755 56.486C75.6349 56.0109 77.239 55.0843 78.5278 53.7983C79.8166 52.5123 80.7454 50.9118 81.2215 49.1563C83.2764 37.721 83.9096 20.3315 81.1683 9.32124Z" fill="#FF0000"/>
<path d="M33.2074 41.6671L54.7126 29.2386L33.2074 16.8101V41.6671Z" fill="white"/>
</svg>
                            </span>
                            <img width="560" src="https://karkasdoma.pro/wp-content/uploads/8-27-1.jpg" height="315" v="tNIMbHNtm7w">
                        </div>
                        
// SCRIPT
                        
                        <script>
                            $(document).on('click', '.spawnElement .overflow', function() {
                                var elThis = $('.spawnElement img');
                                var h = elThis.height();
                                var w = elThis.width();
                                elThis.css({
                                    'display': 'none'
                                });
                                var v = elThis.attr('v');

                                var iframe = '<iframe autoplay="1" height="' + h + '" width="' + w + '" src="https://www.youtube.com/embed/' + v + '?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
                                elThis.parent().html(iframe);
                            });

                        </script>
                        
                        
// CSS
.spawnElement .overflow {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 3;
    top: 0;
    left: 0;
}
.spawnElement .overflow {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 3;
    top: 0;
    left: 0;
}