Модификация Iframe на php

100

29 марта 2021, 06:40

Есть задача модифицировать ютубовский плеер. У ютуба есть эмбендная ссылка такого типа - https://www.youtube.com/embed/dQw4w9WgXcQ, ее можно встраивать на сайты через фрейм.

Как известно, в целях безопасности нельзя получать и изменять контент фрейма, тк он грузится с куками пользователя, а следовательно с личной информацией.

Какой обход этой системы можно придумать, чтобы при загрузке плеера через фрейм добавлять в него свои стили?

Answer 1

А почему не убрать элементы управления и использовать стандартный YouTube Player API,
для добавления своих элементов управления?!

https://developers.google.com/youtube/iframe_api_reference

Попросту говоря: вы можете "положить сверху" любые элементы и управлять плеером
через new YT.Player(...)

К примеру добавим свою полоску навигации:

https://codepen.io/anon/pen/mZoooB?editors=1000

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #wrapper {
                display: inline-block;
                width: 320px;
                height: 180px;
                position: relative;
            }
            #control, #progress {
                position: absolute;
                width: 60px;
                right: 0;
                bottom: 0;
            }
            #control {
                height: 100%;
                background-color: rgba(255, 255, 255, 0.2);
            }
            #progress {
                background-color: rgba(244, 67, 54, 0.7);
                transition-duration: 1s;
                transition-property: height;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="api-iframe-player"></div>
            <div id="progress"></div>
            <div id="control"></div>
        </div>
        <script>
            var player;
            var idInterval;
            var control = document.getElementById('control')
            var progress = document.getElementById('progress')
            function onYouTubePlayerAPIReady () {
                player = new YT.Player('api-iframe-player', {
                    height: '180',
                    width: '320',
                    videoId: '3jNlIGDRkvQ',
                    playerVars: {
                        controls: 0,
                        fs: 0,
                        iv_load_policy: 0,
                        showinfo: 0,
                        modestbranding: 1
                    },
                    events: {
                        'onStateChange': (v) => playProgress(v.data === 1)
                    }
                });
                setControl()
            }
            function setControl () {
                var controlHeight = control.getBoundingClientRect().height
                var p
                control.addEventListener('click', (e) => {
                    p = (controlHeight - e.layerY) / controlHeight
                    progress.style.height = (p * 100) + '%'
                    player.seekTo(player.getDuration() * p)
                })
            }

            function playProgress (play) {
                if (!play) {
                    clearInterval(idInterval)
                    return;
                }
                idInterval = setInterval(() => {
                    progress.style.height = ((player.getCurrentTime() / player.getDuration()) * 100) + '%'
                }, 1000)
            }
        </script>
        <script src="https://www.youtube.com/iframe_api"></script>
    </body>
</html>

Answer 2

Какой обход этой системы можно придумать, чтобы при загрузке плеера через фрейм добавлять в него свои стили?

Никакой. Содержимое тега iframe рендерится в браузере, а дальше сами знаете.

Здесь либо искать сторонний готовый плеер, либо писать самому на JS.

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

barode reader в режиме эмуляции клавиатуры

Задача стоит в том, чтобы понимать где ввод с клавиатуры в где с ридераПроблема: Разница между событиями keyup и keydown нам известна, но я не могу...

javascript