как найти элемент в iframe?

помоги с проблемой, есть компонент в который входит iframe с видео youtube. Для этого компонента подготовил превьювер с кнопкой по нажатию на которую, превьювер исчезает и запускается видео. Как мне найти элемент video в iframe. Пытаюсь через contentDocument и contentWindow, не получается.

html
<div class="video">
    <div class="video-title h4 color-font-blue">
        видео блок 
    </div>
    <p class="video-text block-text-desc block-text-desc p1 color-font-blue">
        видео блок 
    </p>
    <p class="video-text block-text-desc block-text-desc p1 color-font-blue">
        видео блок 
    </p>
    <ul>
        <li class="block-text-li p1">
            <span>— </span> видео блок 
        </li>
        <li class="block-text-li p1">
            <span>— </span> видео блок 
        </li>
        <li class="block-text-li p1">
            <span>— </span> видео блок 
        </li>
    </ul>
    <div class="video-block-info">
        <p class="p3 color-font-blue">видео блок </p>
        <div class="video-block-time">
            <svg viewBox="0 0 64 64"  xmlns="http://www.w3.org/2000/svg">
                <path d="M32.0006 4.00049C16.5618 4.00049 4.00128 16.561 4.00128 31.9998C4.00128 47.4387 16.5618 59.9992 32.0006 59.9992C47.4395 59.9992 60 47.4387 60 31.9998C60 16.561 47.4395 4.00049 32.0006 4.00049ZM32.0006 54.3993C19.6501 54.3993 9.60115 44.3503 9.60115 31.9998C9.60115 19.6493 19.6501 9.60036 32.0006 9.60036C44.3511 9.60036 54.4001 19.6493 54.4001 31.9998C54.4001 44.3503 44.3511 54.3993 32.0006 54.3993Z" />
                <path d="M34.8006 18.0005H29.2007V33.1593L38.4209 42.3795L42.38 38.4204L34.8006 30.841V18.0005Z" />
            </svg>
            <p class="p3 color-font-blue">видео блок </p>
        </div>
    </div>
    <div class="video-block">
        <iframe width="100%" height="369" src="https://www.youtube.com/embed/lAStwOgujkg"
                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen>
        </iframe>
        <div class="video-preview">
            <img src="../../img/video.jpg" alt="">
            <div class="video-preview-overlay"></div>
            <button class="play-button js-video-play-button">
                <img src="../../img/icons/icon_play_button.svg" alt="play">
            </button>
        </div>
    </div>
</div>
js code 
(function () {
    var videoBlocks = document.querySelectorAll('.video')
    videoBlocks = Array.prototype.slice.call(videoBlocks);
    if (videoBlocks.length < 1) {
        return
    }
    videoBlocks.forEach(videoBlock => {
        var videoPlayButton = videoBlock.querySelector('.play-button')
        var youtubeIframe = videoBlock.querySelector('iframe')
        console.log(youtubeIframe)
        var youtubeInner = youtubeIframe.contentDocument
        var youtubePlayer = youtubeInner.querySelector('video')
        var videoPreview = document.querySelector('.video-preview')
        console.log(youtubePlayer)
        videoPlayButton.addEventListener('click', function (e) {
            videoPreview.classList.add('video-preview-off')
            youtubePlayer.play()
        })
    })
})();