Как вставить видео на сайт? Универсальная техника вставки при помощи HTML кода

Всем привет. Сегодня будет коротенький пост, в котором я поделюсь с вами информацией, как вставить видео на сайт при помощи html кода. Конкретный пример будем рассматривать для CMS WordPress, но думаю, что такой способ подойдет и для обычных сайтов.

Как вставить видео на сайт

Видео в контенте позволяет дольше задержать пользователя на вашем ресурсе, а чем дольше он проведет времени, тем лучше. На своем блоге я неоднократно говорю читателям, чтобы они делали уникальный и интересный контент + вставляли видео и картинки.

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

Как вставить видео на сайт? Снимаем нагрузку с движка

Конкретный пример вставки видео мы рассмотрим с сервиса ютуб, так как он самый популярный в рунете. Как произвести регистрацию и как вставлять видео при помощи плагина video embedder, надеюсь, вы знаете.

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

Давайте же избавимся от плагина и научимся вставлять видео на сайт при помощи обычного html кода. Сразу хочу сказать, если вы до этого пользовались плагином, то все видео нужно будет вставлять сначала, так как после деактивации плагина, видео которое вставлялось ранее, отображаться не будет.

Приступим. Переходим на сайт ютуб, ищем видео, которое хотим вставить к себе в статью или просто на сайт. Затем нажимайте кнопку «поделиться», на скриншоте под номером 1.

Получение кода

2. Выбирайте HTML код;
3. Копируйте полученный код.

Также, здесь сразу можно задать размер окна для видео, выбирается в выпадающем меню, размеры задаются в зависимости от возможностей вашей темы.

Размер видео

Допустим, не один из предложенных размеров меня не устроил, поэтому, я задал свои цифры. Где их менять, читайте ниже.
Теперь, для вставки видео в статью, открывайте ее и ищите место, где его отображать, зачастую я размещаю их после основного текстового содержимого.

Чтобы вставить код, нужно перейти в текстовый редактор, и в нужное место вставить код.

Текстовый редактор

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

Код записи

На скриншоте, код обведенный в красную рамку, параметры height и width задают ширину и высоту окна, их пожеланию можно изменить.

Еще я выровнял окно посредине. Делается это посредством заключения кода в блок div и придав атрибут align.

<div align="center">код с ютуба</div>

После вставки, не забудьте сохранить. Вот таким легким способом можно избавиться от плагина и ускорить работу своего блога.

Новость. Вы слышали, что в Америке хотят сделать дефолт? У них всемирный долг составляет более 16 триллионов долларов. Нашел прикольную картинку.

Дефолт в америке

Как вам такие масштабы долга?))). Я думаю, что если произойдет дефолт, то будет всемирный переворот, а вы как думаете? Доллары еще в носках храните? :Ъ

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

С уважением, Михед Александр.

Метки:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Комментарии
  1. Александр Викторович  |  15.10.2013 в 14:16  |  Цитировать

    Шапка шикарная! Смотрится очень привлекательно.

    Статья написана очень понятно, четкая инструкция. вопросов по установке видео не возникает. Нужно попробовать себе. подобрать что то подходящее.

    Ответить
    • Михед Александр  |  15.10.2013 в 15:24  |  Цитировать

      Спасибо, лучше сразу кодом, чтобы потом не переделывать)

      Ответить
  2. Диана  |  15.10.2013 в 15:39  |  Цитировать

    Ничего себе долг у них =-O Да пусть делают)) Но я доллары в носках не храню конечно *JOKINGLY*

    ПО статье — учту, так все просто оказывается)) Беру на заметку на будущее, ставлю лайк)) *THUMBS UP*

    Ответить
  3. Татьяна  |  15.10.2013 в 15:45  |  Цитировать

    А я видео заключаю просто в теги и Так ведь можно?

    Ответить
    • Михед Александр  |  16.10.2013 в 08:56  |  Цитировать

      В какие теги?)

      Ответить
      • Татьяна  |  16.10.2013 в 13:02  |  Цитировать

        я писала, почему-то они не отразились, напишу по русски — и

        Ответить
        • Татьяна  |  16.10.2013 в 13:03  |  Цитировать

          блин, в значках не отображается %) , в общем центер и центер

          Ответить
          • Михед Александр  |  17.10.2013 в 07:42  |  Цитировать

            Я не совсем понял, в чем у тебя проблема?

          • Татьяна  |  17.10.2013 в 14:25  |  Цитировать

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

          • Михед Александр  |  19.10.2013 в 11:02  |  Цитировать

            Как теги звучат?)

  4. Диана  |  15.10.2013 в 15:54  |  Цитировать

    Вау, ну и циферки, аж дрожь по коже пошла и растут циферки очень быстро, жуть какая =-O

    Ответить
  5. Николай  |  15.10.2013 в 19:40  |  Цитировать

    Смотрю, деревом обшил свой блог, Александр, прикольно, у меня ассоциация с ламинатом и страница блога- лист бумаги с текстом. 8)

    Шапка интересная, я понял это все твои проекты? Скроллинг доделаешь еще или активными картинки для перехода будут в будущем?

    Видео с ютуба вставить легко, плагины только мешают в этом случае.

    По поводу Америки, никогда они не обонкротятся, у них Генштаб финансовый, они себя в обиду не дадут, им проще очередную страну захватить и нефть высасывать в счет долга. 😛

    Ответить
    • Сергей  |  20.10.2013 в 14:35  |  Цитировать

      Да вряд-ли они обанкротятся. Полмира на долларах завязана 8)

      Ответить
      • Babenko  |  23.10.2013 в 06:13  |  Цитировать

        Ну то, что пол мира долларами обвязано говорит лишь о том, что если что-то случиться, то Америка потянет за собой все эти страны, которые «обвязаны»)

        Ответить
  6. Сергей Гвоздев Дед  |  15.10.2013 в 20:23  |  Цитировать

    Я всегда пользуюсь этим методом вставки роликов с YouTube. Но можно вставлять не код, а адрес ролика типа

    www.youtube.com/watch?v=y...mLeJ1-eGi1jKMxBQ

    Который появляется сразу после нажатия на кнопку «поделиться».

    Ответить
    • Сергей Гвоздев Дед  |  15.10.2013 в 20:26  |  Цитировать

      В данном случае вы попадёте на мой последний ролик.

      Ответить
  7. Михед Александр  |  16.10.2013 в 08:56  |  Цитировать

    Не кисло циферки летят 🙂 Тань, так ты на форексе играешь?)

    Ответить
    • Татьяна  |  16.10.2013 в 13:05  |  Цитировать

      ну да, есть такое увлечение, только сейчас больше в блоггинг вдарилась %)

      Ответить
      • Александр Викторович  |  16.10.2013 в 13:44  |  Цитировать

        А на форексе действительно можно заработать? Или скорее проработать? Там ведь на одной интуиции далеко не уехать.

        Ответить
        • Татьяна  |  17.10.2013 в 14:24  |  Цитировать

          Я знала что мне такой вопрос зададут)) Заработать можно, просто нужно как раз не на интуицию рассчитывать, а на знания, и нервы стальные нужны))

          Ответить
          • Михед Александр  |  17.10.2013 в 17:36  |  Цитировать

            А сейчас играешь или подзабросила?)

      • Babenko  |  20.10.2013 в 08:37  |  Цитировать

        Меня больше интересует вопрос на форексе сама играешь?) Или просто через трейдеров? Совершенно разные вещи. Сейчас просто инвестированием тоже занялся)

        Ответить
        • Сергей  |  20.10.2013 в 14:36  |  Цитировать

          И как успехи?

          Ответить
        • Михед Александр  |  20.10.2013 в 20:22  |  Цитировать

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

          Ответить
        • Татьяна  |  22.10.2013 в 11:24  |  Цитировать

          Я сама торговала, и успехи нормальные были, но так как у меня сумма на счету 200 долл, так ощутимо заработать не получалось, и времени сейчас нет (за новостями следить, анализировать технически)

          но одну сделку я помню, это 6000 руб))) радости не было предела)) =)

          Ответить
        • Babenko  |  22.10.2013 в 11:25  |  Цитировать

          Успехов пока не много (Частично из-за того, что не большую сумму вложил) Но пока все в плюс 🙂 ...Ну меня например радует перспектива получения 130% годовых)) А в месяц и по 10% можно снимать дохода)

          Ответить
        • Татьяна  |  22.10.2013 в 11:25  |  Цитировать

          Да вот тоже думаю, отдать управляющему, пускай поторгует, посмотрим что получится, 10 % всего берет) за управление

          Ответить
  8. Сергей Гвоздев Дед  |  20.10.2013 в 07:39  |  Цитировать

    Ой! Какой ужас эти цифирьки. С ума сдуреть!!!

    Ответить
  9. Наталья  |  20.10.2013 в 15:46  |  Цитировать

    Александр, спасибо за статью. Я пользуюсь этим методом вставки видео, но у меня не получалось сделать его посередине. А Вы подсказали мне этот момент и ещё о размерах видео узнала. Раньше вставляла как есть. 8)

    Ответить
    • Михед Александр  |  20.10.2013 в 20:30  |  Цитировать

      Приветствую, Наталья, рад помочь, заскакивайте на огонёк, буду рад общению 😉

      Ответить
  10. Сергей  |  31.10.2013 в 06:30  |  Цитировать

    Я тоже просто копирую код и вставляю на страницу. Потом еще от индексации закрываю и все =)

    Ответить
  11. Мария Тернова  |  31.10.2014 в 07:18  |  Цитировать

    Мне как-то раз показали один способ, так им и пользуюсь. Просто встаю на видео мышкой, кликаю правой кнопкой и выбираю «скопировать HTML код». Простенько и со вкусом — как раз для таких чайников, как я 😀

    Ответить
  12. Александр Викторович  |  24.11.2014 в 09:14  |  Цитировать

    Мне хорошо помогла эта статья. Сделал из фоток свое первое видео, это вроде слайдер называется. Закинул на свой канал, который только начал вести. Воспользовался инструкцией и разместил на своем блоге с помощью кода. Ролик как раз соответствует статье. Получилось без проблем. Спасибо Саша за инструкцию.

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

up