WordPress: как сделать всплывающее окно с видео Facebox

Видео на Vimeo и Youtube теперь предлагают видео высокого разрешения, которые могут занимать довольно много места на веб-сайте или в блоге. Один из способов оптимизации - использовать метод Facebox. Facebox - хорошее средство отображения окна на вашей странице без отдельного всплывающего окна.

lifeline-video-button.png

Центры обработки данных Lifeline у них было видео, созданное Another Cool Design, которое они хотели разместить на своей домашней странице - без необходимости перемещать или переделывать тему. Итак - мы сделали красивое маленькое изображение с большой кнопкой воспроизведения на нем и включили код, который генерирует стильное окно для отображения видео внутри.

lifeline-video-facebox.png

Реализация была простой, используя Плагин WordPress Facebox Gallery из Truimage. Я создал внешняя страница (video.html) в корне сайта, на котором есть видео (с autoplay = 1, чтобы оно воспроизводилось автоматически при открытии), а затем добавил текстовый виджет с необходимым фрагментом.

<a href="video.html" rel = "facebox" onclick = "javascript: pageTracker._trackPageview ('/ special / mypage');">

Была основана rel = facebox Обозначение - это то, что запускает код при нажатии на ссылку. Появляется лицевое окно видео, которое сразу же начинает воспроизводиться. Это простая реализация и простое решение для встраивания одного или нескольких видео на страницу. Очень скоро мы будем использовать этот метод на другом сайте!

ПРИМЕЧАНИЕ. Важно зафиксировать количество просмотров видео в пределах клиентского аналитика (Google Analytics), поэтому мы также добавили событие onclick в тег привязки. Теперь, когда люди нажимают на видео, мы получаем «виртуальный» просмотр страницы. Я добавил код выше.

3 комментариев

  1. 1

    Спасибо за написание учебника. Надеюсь, это прояснит некоторые вещи для реализации встроенного контента во всплывающем окне. 🙂

  2. 2

    Вы понимаете, что в IE после закрытия окна видео будет продолжать воспроизводиться в фоновом режиме? (столкнулся с проблемой сам и пытаюсь найти решение!)

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.