ТВ-рамки для видео из YouTube

По умолчанию во всех примерах вместо видео с YouTube грузится его скриншот, а подмена на ролик реализована небольшим кодом на jQuery.

Для всех примеров используется одинаковый jQuery код для подстановки в рамку скриншота и замены его на видео по клику.

Вариант 1:

Где:

Вариант 2:

Где:

Вариант 3:

Где:
Для установки альтернативных рамок нужно:
  • Найти подходящую рамку, например на сайте pngwing.com
  • Подогнать ее размеры под видео в классе: .tv-ram (делается это на глаз)
  • Задать отступы в классе .tv-wrap
  • Также можно установить максимальный размер для всего контейнера, который в примерах равен 800px

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Антон:

    Добрый день, а куда вставлять скрипт?

    Ответить
    • Alexander:

      Ниже библиотеки jQuery

      Ответить
  • Алексей:

    Здравствуйте
    Сайт не отображает видео, хоть я и вставил id с ютуба. В чем может быть проблема?

    Ответить
    • Алексей:

      Извиняюсь) не добавил скрипт куда нужно. Все работает!

      Ответить
    • Олег:

      не показывает видео, куда и как поставить ссылку

      Ответить
      • Alexander:

        Какую ссылку?
        Я без просмотра получившегося результата не смогу подсказать.

        Ответить
        • Олег:

          просто скопировал этот код
          сперва поставил css
          потом html
          и скрипт
          но ничего не показывает

          Ответить
          • Alexander:

            А как я должен угадать, почему не показывает?
            Может, jquery не подключена, может еще что то со скриптом....
            Он делает подмену атрибута data-video на картинку, а по клику на видео. Если нет ни того, ни другого, а только рамка, то ошибка в нем.

            Ответить