Vimeo встроить в Squarespace: скрыть элементы управления при загрузке, показать при наведении

Question

Новый пользователь Squarespace, Vimeo и iFrame здесь. Я делаю какую-то работу для некоммерческой организации, и они попросили меня создать страницу «Отзывы» с ~ 10 видео, где элементы управления каждого из них отображаются только при наведении курсора.

При загрузке / неактивно состояние

При загрузке видео не должно быть никаких элементов управления; совместное использование; или заголовок / видимый текст.

При наведении

При наведении пользователь должен видеть элементы управления проигрывателя.

Что я пробовал

Учитывая базовый код для вставки iFrame:

<iframe src="https://player.vimeo.com/video/58659769" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

• ✅ ?title=0&byline=0&portrait=0 избавляется от названия, имени владельца и аватара владельца учетных записей Vimeo, независимо от платного статуса. Это шаг в правильном направлении!
• ? ?controls=0 избавляет от всех элементов управления для видео Pro +, что является желаемым начальным состоянием. Тем не менее, единственный способ воспроизвести видео через autoplay=1: https://developer.vimeo.com/player/sdk/embed. Это не будет работать с несколькими видео на странице. Кроме того, у нас нет платной учетной записи Vimeo.
• argeТаргетинг элементов с помощью { display: none; } работает, когда в моей панели инструментов Dev после загрузки страницы. Однако, я не могу произвести тот же эффект через панель Custom CSS - я подозреваю, из-за ограничений на стороне сервера Vimeo. (Сначала элементы скрываются, а затем визуализируются через ~ 3 секунды.)
• ?Я не могу добавить пользовательский Javascript в сайт через режим разработчика, потому что мы используем только базовый c Squarespace, так что все решения JS в настоящее время заблокированы. Тем не менее, я могу заставить их заплатить за обновление Squarespace, так что приветствуются решения JS!
• ?Ввод тегов <script> в режим встраивания не выполняет код

Я знаю, что это будет возможно со стороны разработчиков Vimeo, потому что желаемое событие происходит, когда я начинаю проигрывать видео. После приостановки воспроизводимого видео элементы управления исчезают, а затем снова появляются при перемещении мыши над видео.

Самым близким, что я мог найти, было использование Frogal oop (https://forum.webflow.com/t/play-vimeo-video-on-hover-from-a-cms-collection/78458). Однако, учитывая JavaScript ограничений, я не знаю, как выполнить нечто подобное в Squarespace.

Credit

Кадры из видео только для тестирования, если я знаю, что они загружены пользователю с учетной записью Vimeo Plus. Спасибо Бьянке Джавер! https://vimeo.com/58659769

Answer 1

Мне удалось связаться с людьми из учетной записи Twitter @ VimeoStaff , которые предоставили мне следующий ответ. TL; DR: то, что я пытаюсь сделать, невозможно, но есть некоторые (неоптимальные) обходные пути.

Как вы обнаружили, вы можете управлять настройками индивидуально (например, заголовок и подпись) на вкладке "Вставить" на странице настроек видео.

Боюсь, невозможно изменить что-либо в середине загрузки в JS, то есть вы не сможете загрузить плеер без элементов управления, а затем активировать его при наведении курсора. Приносим извинения за доставленные неудобства! Я обязательно передам этот отзыв нашей команде разработчиков продукта.

Возможно удалить панель воспроизведения из встроенных видео. Вы можете включить эту функцию, добавив параметр? Background = 1 в конец URL-адреса проигрывателя в вашем коде для встраивания, например:

<iframe src="https://player.vimeo.com/video/76979871?background=1"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>

Добавление этого параметра будет иметь следующий эффект:

• Все переключатели и элементы проигрывателя будут отключены (включая кнопку воспроизведения / паузы!)
• Видео будет автоматически l oop.
• Видео будет установлено на autoplay
• Видео будет отключено

Если вы просто хотите скрыть пользовательский интерфейс плеера без отключения звука / автопроигрывания / зацикливания (т. е. для проигрывателя без хрома), вы можете альтернативно добавьте control = 0 в конец URL-адреса проигрывателя в вашем коде для встраивания, например:

<iframe src="https://player.vimeo.com/video/76979871?controls=0"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>

При использовании параметра controls для встраивания вам нужно либо включить автозапуск (? autoplay = 1) , используйте сочетания клавиш или используйте наш SDK проигрывателя для запуска и управления воспроизведением.

Дополнительную информацию о фоновом и бесцветном видео можно найти здесь. Обратите внимание, что сочетания клавиш нельзя отключить в настоящее время.

Кроме того, я вижу, что вы упомянули о наличии нескольких видео на одной странице. Если у вас есть несколько автозапусков видео на определенной странице, вам также нужно будет включить этот параметр: autopause = 0