Youtube видео в рамке, которая поверх самого iframe, есть примеры?

Здравствуйте. Есть предположение, или примеры как можно реализовать вот такой эффект? Или как зугуглить правильно, то чего я пытаюсь добиться.
5ce44f551ff90347104246.png
Загвоздка в том, что эта рамка должна быть как бы поверх видео, что бы вырез под динамик обрезал видео.
Скрин с сайта где я это уже как бы сделал, однако, все как-то криво. Блок с фоном перекрывает iframe, по-этому вкл/выкл работает при клике на сам блок с фоном.
На некоторых точках появляются такие отступы.
5ce45040ccd5b615873385.png
Из-за этого приходится на всех проблемных точках играться с padding-ми.

Вообщем реализация мне не нравится, но придумать что-то годное пока что не могу, и времени на реализацию задачи отведено очень мало. Если кто-то видел подобное, то буду очень благодарен за ссылку на сайт с такой приблудой.

Код прилагаю на всякий, хоть и сомневаюсь что он может понадобиться.
.phone-video {
    padding-bottom: 56.25%;
    padding-top: 25px;
    margin-top: -25px;
    height: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.phone-video__border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-image: url(/images/stomatology/phone.png);
}
.phone-video #video-placeholder {
    padding: 9% 32px 9%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

<div class="phone-video">
 <div class="phone-video__border"></div>
 <div id="video-placeholder"></div>
</div>

function onYouTubeIframeAPIReady() {
        player = new YT.Player('video-placeholder', {
            width: 600,
            height: 400,
            videoId: 'pQuyNz6Hmi4',
            playerVars: {
                color: 'white',
                controls: 0
            }
        });
    }
    $('.phone-video').on('click', function () {
        let state = player.getPlayerState();
        if (state != 1) {
            player.playVideo();
        } else {
            player.pauseVideo();
        }
    });
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть
Тут кода нужно гораздо, гораздо меньше.

А-ля и вуаля:


Поставьте вашу картинку нормальную и подгоните проценты позиционирования элементов.

Поверх блока с видео на абсолютном позиционировании нужно разместить фото вашего телефона и обязательно (!) задать этому блоку свойство pointer-events: none;, чтобы клики проходили сквозь картинку и добирались до самого iframe.

Плюс, посмотрите на используемый хак для соотношения сторон более внимательно. У вас соотношение сторон стоит 16:9 в коде (56,25%), а у iPhone X — 18:9 (50%).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Девять линий Ульяновск
от 45 000 до 80 000 руб.
Krome Photos Челябинск
от 80 000 руб.
26 июн. 2019, в 14:54
2500 руб./за проект
26 июн. 2019, в 14:52
2000 руб./за проект
26 июн. 2019, в 14:34
500 руб./в час