Леонид Добрый

Вёрстка состоит из разных слоёв, накладываемых один на другой. Читай про Z-order, compositing.
Кусок изображения с полотном слева выглядит как обрамление в прямоугольник с закруглёнными краями большого радиуса, рамкой и тенью.
Изображение в круге - также обрамление в окружность. Примеры: https://pqina.nl/blog/applying-a-circular-crop-mas...
Линии прямоугольника можно сделать сначала как прямоугольники со сплошными линиями, а сверху наложить другие прямоугольники с цветом фона. Таким образом, получится эффект прерывистости. А если делать гораздо проще, то просто взять готовое изображение PNG с прозрачным альфа-каналом в виде фона.

Скрипт выполняется до загрузки DOM?

Попробуйте так:

document.addEventListener('DOMContentLoaded', (event) => {
    const videoBtn = document.querySelector('#video-btn');
    const videoPicture = document.querySelector('.video__picture'); 

    videoBtn.addEventListener('click', function () {
        videoPicture.classList.add('none');
    });
});