Рассылка блога

Форма подписки

Подпишись на обновления сайта. Получай новые статьи на почту:

Напишите мне

Your message was successfully sent.
Thank You!

Яндекс.Метрика
Яндекс цитирования
DevilArt.name - cервис анализа сайтов
Счетчик PR-CY.Rank
Счетчик PR-CY.Rank

Вставить видео на сайт

Вставить видео на сайт

          Вставить видео на сайтРастущая популярность использования в интернете видеороликов, появление новых способов подачи материалов в виде «3D книга с эффектом перелистывания страниц» http://fobos12.ru/?p=2289,  сочетающих простоту обычного PDF текста и возможности видео, обозначили актуальность вопросов, особенно для новичков, «Как вставить видео на сайт».

          Статья предназначена новичкам, поэтому рассмотрим подробно именно вопросы вставки готового видео на свой сайт с наиболее популярного видео сервиса Youtube и еще одного, Rutube без углубления в процессы создания своего видео и закачки его на указанные сервисы. Одно из преимуществ указанных сервисов заключается в том, что видео, размещенные с их использованием, не занимают объем на Вашем сайте, а значит, не увеличивают время загрузки сайта, не «тормозят» его.


         

      Вставка видео с сервиса Youtube

          Главную страницу Youtubeоткрываем, поместив в поисковую строку любого браузера адрес youtube.com (рисунок 1).

Вставить видео на сайт

Рисунок 1. Поисковая строка браузера

Для поиска нужной нам видеозаписи вводим ее название в поисковое окно на главной странице (рисунок 2)  и нажимаем «Поиск».

Вставить видео на сайт

Рисунок 2. Главная страница сервиса

Откроется  страница с запрашиваемым видео (рисунок 3). Чтобы получить ссылку на видео или сгенерировать код для вставки на сайт, нажимаем кнопку «Поделиться».

Вставить видео на сайт

Рисунок 3. Страница с запрашиваемым видео

Под нашим видео откроется всплывающее окно со ссылкой на видео,  кнопками «Сгенерировать HTML-код», «Отправить по эл.почте» и кнопками социальных сетей (рисунок 4).

Вставить видео на сайт

Рисунок 4. Всплывшее окно с кнопками действия

После нажатия на кнопку «Сгенерировать HTML-код»,внизу в окошке появится сгенерированный код (рисунок 5).

Вставить видео на сайт

Рисунок 5. Окно с сгенерированным кодом HTML для вставки на сайт

До вставки кода на сайт можно выбрать сначала размерные параметры видео, указанные над прямоугольниками в пикселях. Если указанные параметры Вас не устраивают, можно задать их в окне «Другой». Параметры  в коде автоматически изменятся на выбранные.

Вставить видео на сайт

Рисунок 6. Окно сайта для вставки записи

Далее копируем сгенерированный код и вставляем в нужное место на странице нашего сайта в режиме HTML. Чтобы окно с видео разместилось ровно посередине нашей странички, добавляем в начале кода без пробелов надпись <center>, и в конце кода </center> (рисунок 6). Нажимаем кнопку «Опубликовать»и открывается страница сайта с нашим вставленным видео (рисунок 7).

Вставить видео на сайт

Рисунок 7. Страница сайта с вставленным видеороликом

         Вставка видео с сервиса Rutube

          Аналогично Youtube на главной странице Rutube вводим в поисковое окно название требуемого видео, нажимаем «Поиск»и, тем самым, открываем страницу с нашим видео (рисунок 8).

Вставить видео на сайт

Рисунок 8. Страница с видео для вствки на сайт

Нажимаем кнопку «Ссылка» - открывается страница с кнопками действия (рисунок 9).

Вставить видео на сайт

Рисунок 9.Страница с кнопками действия

Нажимаем кнопку «Код для блога» и внизу, в окне появляется сгенерированный код HTMLдля вставки на сайт (рисунок 10).

Вставить видео на сайт

Рисунок 10. Сгенерированный код для вставки на сайт

Далее действуем аналогично описанному выше.

В качестве примера посмотрите вставленный ролик и послушайте хорошую инструментальную музыку в исполнении оркестра Поля Мориа «Эль Бимбо».

Подпишись на обновления сайта. Получай новые статьи на почту:

Подпишись на рассылку!

Ваш e-mail: *
Ваше имя: *
Подписчиков:

Нравится

Понравилась статья? Поделитесь с друзьями! Нажмите на кнопочки!
Приглашаю присоединиться:

Похожие статьи

19 комментариев к записи Вставить видео на сайт

Страница 1 из 11
  • cupoma58 сказал:

    найди «приближённого» к moonwolk.cc и поройся в исходном коде; пример:http://cupoma58.tf9.ru/page/player.html

  • Elena сказал:

    Спасибо за статью,Леонид!
    И спасибо за помощь в освоении азов интернет-грамотности.

  • tatuaz сказал:

    На вордпресс много плагинов — просто надо активировать

  • Очень признательна за статью. Буквально на днях пыталась вставить видео на сайт и не получилось. И вот случайно зашла к Вам на сайт и напомнила для себя, как надо сделать. У Вас много полезных для меня статей, буду часто к Вам заглядывать. Удачи!

  • admin сказал:

    Елена, видео с Youtube занимает место на Youtube.

  • Елена сказал:

    Спасибо!
    Всё просто и понятно.
    Подскажите, сколько места на сайте займет видео с Youtube?

  • Юрий сказал:

    Полезная статья

  • admin сказал:

    Пожалуйста, Татьяна! Рад, что у Вас получается. Вы бесплатную книгу скачали? Если нет, то ссылка на подписную страницу:http://fobos12.ru/saitsozdam/
    Удачи! С Новым Годом наступающим Вас! Пусть сбудутся все Ваши задумки!

  • Татьяна сказал:

    Получилось! Только я не вижу видео, пока нахожусь в панели админки и перехожу на сайт. Кода выходим из панели администрирования и захожу как простой посетитель то все идет!!! УРА! Спасибо!

  • Татьяна сказал:

    До этого пробовала — не получалось. Видимо не правильно что то делала. Сейчас попробую еще раз.

  • Ихилов сказал:

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

  • Елена сказал:

    Когда — то мне очень нужна была ваша статья, думаю и теперь она очень многим пригодиться. Для таких чайников, как я это просто находке!

  • Наталья сказал:

    Спасибо, Леонид! Очень доступный урок. Сразу же вставила нужное мне видео.

  • Мила сказал:

    Песок сказал:
    Август 30, 2012 — 11:58 дп

    Данная заметка актуально только для вордпресс или же и для других движков?

    Для других движков попробуйте отметить по очереди второй и четвертый чекбоксы ..

    В смысле так : сначала второй, не получится- тогда четвертый

  • Мила сказал:

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

  • Татьяна сказал:

    Я таким образом вставляю видео на платформе Blogger.
    На WordPress делаю немного по-другому.
    Вставляю в нужное место, например, [youtube]OrsyLLixSkk[/youtube], где OrsyLLixSkk — идентификатор видео. Это номер в адресной строке ролика: V=OrsyLLixSkk

  • admin сказал:

    Только для WordPress.

  • Благодаря этой статья у меня- новичка в сайтостроении- получилось вставить видео в статью! Я очень рада :)

  • Песок сказал:

    Данная заметка актуально только для вордпресс или же и для других движков?

Страница 1 из 11

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Рад приветствовать!

Подписаться

Архивы

Хостинг для Wordpress сайтов