Инструкция по вставке youtube видеоролика на html сайт

Инструкция по вставке youtube видеоролика на html сайт

Одним из лучших способов заинтересовать пользователя и улучшить поведенческие факторы — это использовать видеоконтент на страницах вашего сайта…….

Очень часто в дополнение к основному сайту создается канал на YouTube — это не только отличное средство монетизации, но и источник потенциальных клиентов.

Внимание !

В самом конце мы рассмотрим: ↓↓↓

  1. Как добавить видео на WordPress сайт
  2. На Joomla Сайт 

Лучшие методы

Даже если вы не владеете навыками работы с HTML и CSS, то в этом материале вы найдёте очень простые инструкции, как вставить видео на сайт всего в несколько кликов.

Но, в первую очередь, давайте разберёмся, зачем вставлять ролики из YouTube на страницу:↓↓↓

  • Улучшает восприятие информации;
  • Дополняет содержимое страницы;
  • Повышаются поведенческие факторы.

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

Простой способ добавления ролика

В данном случае мы будем использовать фрейм, который возьмем непосредственно на YouTube.

1) Для этого вы должны перейти на страницу с видео и под ним найти вкладку «Поделиться«, где выбрать раздел «HTML код»

→ Это можно выполнить — через панель управления хостинга или непосредственно на компьютере отредактировать файл html и залить его на сервер !!!

Аналогичная процедура применяется на сайтах с любыми CMS — можно встраивать видео через визуальный редактор.

Результат будет такой ↓

Общий вид кода выглядит так: 

P.S — Iframe — это тег, создающий контейнер на сайте, который импортирует содержимое сторонних страниц.

В данном случае вы можете самостоятельно настроить некоторые атрибуты: 

  • width — определяет длину плеера в пикселях;
  • height — устанавливает высоту;
  • src — ссылка на импортируемый контент;
  • frameboder — для установки границ;
  • allowfullscreen — разрешение для полноэкранного режима.

Размещаем ролик при помощи тега

Этот код вы можете добавлять на любую страницу, при этом видеоплеер будет выглядеть стандартно.

Давайте рассмотрим общий вид кода для добавления на сайт: 

Обратите внимание, что любые атрибуты вы можете настроить самостоятельно: 

  • loop — функция, которая активирует повторение воспроизведения по окончании ролика;
  • controls — появляются органы управления;
  • src — путь к видео;
  • poster — изображение, которое отображается во время загрузки;
  • width и height — для выбора размеров;
  • autoplay — атрибут активирует запуск видео сразу после загрузки браузера.

На WordPress

Одним из самых простых методов добавления видео используется в WordPress.

  1. Для этого вам нужно зайти в админку
  2. Нажать «Добавить запись»
  3. и непосредственно в форме добавления нажать «Вставить».

Вот и все 

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

Также есть специальные плагины для WordPress, при помощи которых можно добавлять видео на сайт.

На Joomla

Что касается системы управления контентом Joomla, то здесь все немного сложнее.

Самый простой метод — это вставить код видео напрямую из Ютуба.

Устанавливаются эти утилиты очень быстро и значительно упростят процесс, как вставить видео с Ютуба на Joomla

Я очень советую 

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

Источник: http://7youtube.ru/setting-yutuba/vstavit-videorolik.html

Все способы, как можно вставить видео с Youtube на сайт

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

Зачем сайту видео?

Люди, исповедующие консервативный взгляд на значение интернета в распространении информации, рассматривают его как цифровой вариант обычного печатного таблоида. Но прогрессивная часть пользовательской аудитории не готова мириться с таким мнением. Им мультимедийность подавай! Одним из таких веяний и является ретрансляция видео с Youtube на своем сайте.

Что это дает:

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

  • Как способ привлечения посетителей – можно вставить видео на сайт, чтобы увеличить популярность ресурса. Но для этого нужно использовать уникальные ролики, и лучше те, которых нет на популярных видео хостингах. Например, если вы являетесь автором какого-нибудь курса. И чтобы увеличить посещаемость своего сайта, бесплатно выкладываете на нем некоторые из уроков для просмотра;
  • В форме портфолио – подразумевается использование пространства ресурса для демонстрации своих возможностей как высококлассного специалиста в какой-либо сфере. Это могут быть видеоролики, в процессе съемки которых автор выступал режиссером и оператором. Или отснятая обстановка помещения, дизайн которой разрабатывался вами.

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

Способы размещения видео на сайте

Здесь мы рассмотрим наиболее популярные способы. Вот они:

  1. Вставка кода фрейма с Youtube – является наиболее легким методом реализации. Подходит для ретрансляции своего или чужого тематического видео с этого хостинга у себя на сайте. Код для вставки в html можно найти на страничке видеоролика в Youtube. Он находится сразу под окном плеера во вкладке «HTML-код»:

Для начала давайте разберемся, что такое фрейм. Этот элемент в html позволяет отображать содержимое другой веб-страницы в дочернем окне, размещенном на странице основного сайта. Возьмем пример кода фрейма с приведенного выше рисунка:

С помощью тега создается плавающий фрейм, который является своего рода контейнером, позволяющим загружать содержимое другой веб-страницы.

Атрибуты тега:

  • width – задается длина окна фрейма;
  • height – устанавливается высота окна плавающего фрейма;
  • src – путь к файлу, содержимое которого будет воспроизводиться;
  • frameborder – устанавливает отображение рамки вокруг фрейма. Поддерживаются значения yes или no, 1 или 0 (нет);
  • allowfullscreen – разрешение на полноэкранное отображение видео.

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

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

А вот как отображается видео в плеере на странице нашего шаблона:

  1. Использование тега — позволяет размещать, воспроизводить и проигрывать видео на веб-странице. Его атрибуты:
  • autoplay – воспроизведение видео начинается сразу после загрузки страницы сайта;
  • controls – к ролику добавляется панель управления проигрывателем;
  • width, height – отвечают за размеры окна видеоплеера;
  • loop – включает автоматическое повторение воспроизведения видео сразу после его окончания;
  • poster – устанавливает картинку, которая будет отображаться, пока идет загрузка видео. Или если его воспроизведение недоступно;
  • preload – включает предварительную загрузку видео во время загрузки браузером веб-страницы;
  • src – задает путь к видеоролику.

Пример реализации:

Как видно из примера, в тегах реализовано несколько вариантов источников. То есть перед тем, как вставить видео на сайт, его нужно будет «перегнать» в несколько форматов. В зависимости от поддерживаемого формата браузер сам выберет нужный ему вариант.

Более детально о поддерживаемых различными браузерами форматах видео можно узнать из технической документации к языку html.

Вот как это выглядит на нашем сайте:

  1. Использование видеоплееров на основе JavaScript и Flash – самый трудный для реализации вариант. «Вживления» кода таких плееров в ваш сайт требует специальных знаний и навыков. Наиболее оптимальным является бесплатный видеоплеер Spruto. На официальном сайте с помощью конструктора можно настроить его внешний вид и функционал приложения:.

Затем нужно скачать его в виде архива или скрипта. При этом в комплект архива входит подробная документация для настройки и «безболезненной» интеграции видеоплеера на ваш ресурс:

Интеграция видео на сайтах, развернутых на основе CMS

1. WordPress – в этом популярном движке, начиная с версии 2.9, реализована поддержка вставки обычной ссылки на ролик, расположенный на одном из популярных видео хостингов. Для этого нужно всего лишь воспользоваться специальным шорткодом. Его синтаксис:

Ссылка на видео с YouTube

Порядок действий:

  • Заходим в админку сайта;
  • Слева в меню выбираем вкладку «Записи», «Добавить новую»;
  • Пишем заголовок записи;
  • Вставляем шорткод и ссылку на видео;
  • Справа жмем на «Опубликовать»:
  • Вот как выглядит добавленный видеоролик на странице сайта:

Но это не единственный способ того, как вставить видеоплеер на сайт WordPress. Также можно воспользоваться специализированными плагинами.

Вот некоторые из них:

  • JW Player;
  • Video.js;
  • Spider Video Player.

2. Joomla – с этим движком все обстоит не так просто. Поэтому лучше для вставки видео и аудио данных воспользоваться специализированными плагинами.

Вот несколько проверенных:

  • AllVideos;
  • Vidbox;
  • AllVideos Reloaded.

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

Читайте также:  Как защитить аккаунт в вк от взлома?

Источник: http://www.internet-technologies.ru/articles/vse-sposoby-kak-mozhno-vstavit-video-s-youtube-na-sayt.html

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

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

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

Мы с вами живем в период, когда на веб-странице помимо текста и изображений могут присутствовать и другие элементы. В частности, видео. Хорошо сделанный ролик по теме увеличит ранг страницы и позволит пользователям дольше оставаться на вашем сайте. В общем, это достаточно полезный ход.

Как я уже и говорил в начале, существует два способа вставки, которые сегодня можно использовать:

Через фреймы

С помощью тега video, который появился в html5

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

С помощью скриптов

Как разместить видео с Youtube на сайте?

Это очень просто. Идете на ютуб и находите там тот ролик, которое вам нужно вставить к себе на страницу. Под ним есть пару кнопок. В частности, кнопка “Поделиться”. Здесь выбираем пункт html-код и ютуб покажет нам код, который надо вставить у себя в статье, чтобы видео вывелось в ней. Код имеет такое строение:

Давайте вы нем немного разберемся, чтобы понимать, как он работает. Атрибуты width и height указывают ширину и высоту нашего контейнера, вы можете выставить их по дизайну вашего сайта. Пустой атрибут allowfullscreen разрешает расширять содержимое на весь экран, пользователи часто это делают и не нужно им запрещать это.

Frameborder – это рамка фрейма, но она нам ни к чему. Вы можете задать ее самостоятельно через css. Наконец, самый важный параметр – src. Он указывает путь к видео на youtube. https://www.youtube.com/embed/уникальный id видео.

Таким образом, вам достаточно знать адрес конкретного ролика и можно его самостоятельно скопировать и вписать в код.

В данном случае id видео это то, что идет после watch?v=.

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

Вставка через html код

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

Так вот, там появился также тег video и он позволяет вставить видеоролик на сайт без каких-либо скриптов, а также воспроизвести его через встроенный плеер. Это делается вот таким кодом:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Одинарные теги source показывает браузеру путь к файлам и их MIME-тип для правильной интерпретации. Как видите, для работы во всех браузерах нам понадобится один и тот же файл в трех форматах. Сконвертировать можете в любом толковом конвертере или в онлайн-сервисе. Например, online-convert.com.

Отлично, если путь указан верно и все форматы заданы, видео выведется. Если не все форматы указаны, то оно появиться только в тех браузерах, где поддерживается формат. Атрибут controls позволяет вывести элементы управления роликом, чтобы иметь возможность останавливать его, изменять звук и т.д. Это нужно почти всегда, поэтому атрибут просто необходим для удобства пользователя.

Другие способы вставки

Однако кроме этих вариантов есть и другие. Например, вы можете скачать скрипт, который будет выводить плеер. Один из самых популярных – FlowPlayer. Его нужно скачать, распаковать на ваш сайт, прописать путь к скрипту в html-файле и вставить само видео с помощью функции. Руководство по использованию плеера можно найти в документации к нему.

Пример вставки видео через flowplayer. Первым делом нужно подключить скрипт в head:

Далее в body там, где нужно вывести ролик, нужно написать примерно следующее:

Для работоспособности всего этого дела:

Укажите правильные пути к файлам

Обратитесь к ссылке с id = “js-player”, в которую вставлено наше видео, и напишите ей пару css-стилей. Например, сделайте ее блочной для корректного отображения и добавьте оформление, если это необходимо. Самое главное, задайте высоту и ширину.

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

Тег object во многом похож на video, ведь в нем тоже используются одинарные теги, а именно param. В них прописываются различные настройки. Другой тег, с помощью которого можно вставить медиафайлы – embed.

Если выбирать между ними, то для современных браузеров лучше использовать embed. Для этого тега нужно указать такие атрибуты, как:

Width и height – тут все понятно, это размеры;

Src –путь к видео, которое нужно отобразить ;

Type — MIME-тип содержимого;

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Источник: https://webformyself.com/kak-razmestit-video-na-sajte/

Как вставить видео и аудио на веб-страницу

Содержание:

Урок наглядно покажет: как вставить видео на веб-страницу любой версии html. Рассмотрим, для каждого способа вставки видео на сайт, имеющиеся у него плюсы и минусы.

Вначале о том, как вставить видео на страницу с любой версией HTML (4.01, HTML5, XHTML). Этот пример универсален и работает на 99.9%: пользователь сможет посмотреть видео в любом более-менее не старом браузере (IE не ниже v.9) и каким-бы устройством он не пользовался.

Для этого потребуется плеер, например: FlowPlayer, который без труда можно найти в сети. Этот плеер проигрывает видео в формате MP4 и FLV.

Код для вставки видео на страницу выглядит следующим образом (где «papka/name.…» — это путь к вашему видеофайлу, а «name» — его имя):

Ваш браузер не поддерживает просмотр

Скачать видео

Поместите FlowPlayer в ту же папку, где находятся видеофайлы. Атрибуты тега Видео в данном примере: preload=»auto» — загружает видео вместе со страницей, если не использовать этот атрибут, то страница загрузится быстрее, а видео подгрузится при его включении пользователем; controls — показывает панель управления видео.

Замените пропорционально ширину и высоту видео (width и height — в двух местах) на свои, не забывая про соотношение его сторон: 4:3 или 16:9.

Последние две строчки: теги P и A с содержимым — позволят пользователю скачать видеофайл, если он всё-таки не сможет его просмотреть.

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

AddType video/ogg.ogv
AddType video/mp4.mp4
AddType video/webm.webm

Минусом этого способа будет большое потребление ресурсов при одновременном просмотре видео большим количеством посетителей, но это легко нейтрализовать. Для снижения нагрузки на сервер нужно размещать видео на сторонних сервисах, типа облачного хранилища Яндекс Диск, где срок хранения файлов не ограничен.

Вставка видео в HTML5 без плеера

А так можно вставить видео на страницу с HTML5, здесь атрибут poster — это путь к изображению-заставке:

Ваш браузер не поддерживает просмотр

Скачать видео

Чтобы добиться воспроизведения ролика в различных браузерах, видео необходимо конвертировать, а в папку поместить 3 видеофайла в разных форматах. Это можно сделать онлайн, например, здесь: online-convert.com.

Минусом этого способа будет то, что на некоторых устаревших устройствах код будет работать некорректно. Если кроссбраузерность жизненно необходима, то лучше применять вариант №1 — вставку видео с использованием плеера.

Обязательно прочитайте о раскрутке сайта на YouTube, где представлена инструкция по загрузке видео на сервис и правильном его оформлении. Этим способом можно продвигать любые товары и услуги в интернете, в т.ч. партнёрские инфопродукты.

Вставка аудио

Для того чтобы вставить аудио на страницу у нас в распоряжении опять 2 варианта: с mp3-плеером и без него — с помощью кода HTML5. У этого способа вставки аудио те же плюсы и минусы: он проще, но не поддерживается старыми браузерами (IE ниже v.9).

Способ 1. Код вставки аудио на страницу (где «papka/name.…» — путь к аудиофайлу, а «name» — его имя):

Ваш браузер не поддерживает прослушивание

Скачать аудио

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

Для снижения нагрузки на ваш сервер, желательно хранить аудиофайлы на стороннем ресурсе, таком как Я.Диск (см. ссылку выше).

Способ 2. Скачайте mp3-плеер (flv-mp3.com/ru) и поместите его в папку с аудиофайлами. На этом сайте есть возможность «собрать» плеер самому, т.е. задать ему свои настройки:

Читайте также:  Скрытые друзья вконтакте

При сборке аудио-плеера важны два параметра: адрес плеера — вы можете указать папку своего домена (что предпочтительнее), или подгружать его прямо с указанного сайта. Это отразится в коде, который вы сможете скопировать для вставки на веб-страницу, сразу после окончания сборки.

Второй параметр будет влиять на размеры и вид панели плеера, а так же надписи «Прослушать» — её вы измените на свою. Выглядеть панель будет как на следующем скриншоте, но вы сможете изменить цвет, форму и кнопки управления на более красивые:

Если нужно — укажите автозапуск, а полученный код разместите на нужной странице — его, кстати, всегда можно будет отредактировать: вручную или снова посетив страницу сборки плеера.

Источник: http://WebmasterSam.ru/web-html-izuchenie-video.html

Как сделать адаптивное видео (правильная вставка видео на сайт) | Просто делай так

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

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

Однако буквально несколько строк кода помогут выйти победителем из данной ситуации.

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

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

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

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

Обычно вставляют видео через шорткоды самого WordPress (добавить медиафайлы со стороннего сайта)

или путем копирования и вставки записи фрейма, которую формирует Ютуб через поделиться и выбор режима HTML-код.

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

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

Вы сами прекрасно видите суть проблемы невооруженным взглядом. Как говорят в таких случаях: без комментариев! При этом стоит отметить, что горизонтальный скрол на экране не появляется.  Именно по этой причине Яндекс и прислал свое уведомление.

Конечно я поздно хватился — пока на небе сошлись звезды, которые свели меня с решением проблемы и наличием времени на его реализацию. И этим решением, я сейчас поделюсь с Вами.

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

ссылка на видео

Но конечно само по себе помещение в контейнер не даст ничего, если не прописать стили в файле CSS темы:

/* Код для адаптации видео */ .video-responsive { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-responsive iframe, .video-responsive object, .video-responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Конец кода для адаптации видео */

После этого останется просто ссылаться на указанные стили при вставке видео. Для этого в режиме редактора «Текст» к тому самому блоку , про который я писал выше, нужно добавить класс стилей и все автоматом встанет на места:

ссылка на видео

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

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

За счет добавления такой записи уже будет без разницы, как Вы вставляете свое видео — оно прекрасно будет адаптироваться.

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

Дополнительно бы посоветовал заменить указанные  явно параметры фрейма по высоте и ширине (в вышеприведенном коде — это  width=″560″ height=″315″) на такие: width=″auto″ height=″auto″.

Это позволит фрейму занять всю доступную ширину и освободит Вас от необходимости центровки.

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

Как это сделать смотрите в статье Как правильно проверить сайт на мобильность с помощью браузера. И если видео на Вашем сайте вылезает за край, то просто скопируйте стили из статьи и добавьте к себе на сайт в файл CSS стилей.

А уже непосредственно в статье оборачивайте необходимую ссылку тегами.

С уважением, Сергей Почечуев

ПОНРАВИЛАСЬ СТАТЬЯ? РАССКАЖИ ДРУЗЬЯМ!

    ЧИТАТЬ ЕЩЕ ИНТЕРЕСНЫЕ СТАТЬИ:

Источник: http://prostodelaytak.ru/kak-sdelat-adaptivnoe-video-ili-pravilnaya-vstavka-video-iz-youtube-na-sajt/

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

Добрый день! В этой статье-руководстве я покажу вам, как вставить видео с Youtube на сайт, чтобы его впоследствии могли смотреть посетители вашего сайта. Вы узнаете, как вставить видео таким образом, чтобы оно автоматически проигрывалось при открытии страницы, как запускать видео с определенной секунды и многое другое.

В качестве примера, давайте попробуем вставить видео с Youtube на этот сайт, You2bestar.ru, а конкретнее, в начало статьи: Как сделать ссылку на подписку на Youtube. Если же у вас есть свой собственный сайт, то вы можете встроить видео на него.

Перейдите на сайт youtube.com и в поисковую строку введите название видео, которое вы хотели бы встроить на свой сайт. Например, возьмем следующее видео https://www.youtube.com/watch?v=R_2ihpMUo4s. Немного ниже видео, находится кнопка «Поделиться«. Кликните по данной кнопке, чтобы открыть всплывающее окошко:

В этом окошке находятся социальные кнопки и краткая ссылка на видео, с помощью которой вы можете поделиться видео со своими друзьями. Но она не подходит для встраивания видео на сайт. Чтобы перейти в нужное место, нажмите по кнопке «Встроить«, которая находится левее кнопки «Копировать«:

Перед вами откроется еще одно всплывающее окошко, но на этот раз именно то, которое нам необходимо. В левой части окошка находится предпросмотр видео, а справа — настройки, с помощью которых можно настроить и вставить видео с Youtube на сайт, html тег iframe и т.д.:

Чтобы изменить размер встраиваемого блока с видео, введите новые значения атрибутов «width» и «height» html-тега iframe. По-умолчанию, размер блока с видео равняется 560 на 315 пикселей:

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

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

Перейдем к настройкам ниже:

Первый пункт включает показ похожих видео по окончании просмотра. Они будут появляться в самом конце видео, как только посетитель сайта полностью просмотрит видео. По-умолчанию, показ похожих видео включен.

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

Третий пункт добавляет/убирает название видео и панель действий из верхней части видео. По-умолчанию, включено.

И последний, четвертый пункт позволяет активировать так называемый «Режим повышенной конфиденциальности» видео.

Зачем он нужен? Как написано в описании данной настройки, при включении режима повышенной конфиденциальности, Youtube будет сохранять информацию о посетителях сайта только в том случае, если они начнут просматривать встроенное видео.

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

Как включить автовоспроизведение видео на Youtube

Если вы хотите включить автовоспроизведение видео на Youtube сразу же после открытия страницы, то самый простой способ это сделать — добавить к URL-адресу видео в html-теге параметр «?autoplay=1«:

Допустим, у вас было:

А стало:

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

Разобравшись с настройками встраивания, нажмите кнопку «Копировать«, чтобы скопировать html-тег в буфер обмена или скопируйте его вручную. Теперь, осталось дело за малым — встроить видео с Youtube на сайт, чем мы сейчас и займемся.

Читайте также:  Обновление историй в инстаграм + прямые трансляции

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

Прежде всего, вам нужно выбрать место на сайте, где будет показываться видео. В моем случае, я буду встраивать видео в самое начало одной из статей сайта You2bestar.ru. Вставьте скопированный ранее в буфер обмена html-тег видео на свой сайт, и сохраните полученные изменения. Если вы все сделали правильно, то вы должны будете увидеть примерно следующий результат:

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

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

Также читайте о том, как редактировать видео на Youtube: Как редактировать видео на Youtube. # 1

Всем пока!

Источник: http://you2bestar.ru/kak-vstavit-video-s-youtube-na-sajt/

Как вставить видео c Youtube на сайт (HTML, CMS, адаптивность)

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

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

Да и вообще видеоконтент в наше время становится весьма популярным.

Именно поэтому сегодня я хочу рассмотреть несколько нюансов по вставке видео на сайт с Youtube и похожих сервисов. Часть инфы в начале пригодится новичкам, а в конце текста найдете один прием для верстки. Разделы статьи:

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

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

На этой странице вы можете:

  1. Определиться с методом распространения ролика: социальные сети, вставить видео на сайт в HTML формате (что нам и нужно) либо отправить его по почте.
  2. При клике на второй пункт увидите специальный HTML код для вставки видео на сайте.
  3. На третьем шаге выбираете размер — есть парочка форматов по умолчанию (640х360, 560х315 и т.п.), но также разрешается задавать и свои значения.
  4. По желанию включаете доп.параметры: показ названия, панели управления и похожих видео.

То есть все, что вам нужно сделать, это скопировать код соответствующего ролика и добавить его в требуемое место.

Если у вас в проекте имеется определенная админка, то используйте ее встроенный текстовый редактор. В противном случае придется редактировать непосредственно HTML страницу (через Notepad++ или Sublime Text и т.п). Реализацию первого варианта можете посмотреть ниже на примере с Вордпресс.

Пару слов о теге Iframe, который применяется чтобы вставить видео на сайт в HTML с Ютуба. Здесь есть следующие параметры:

  • width — ширина блока;
  • height — высота;
  • src — ссылка на Youtube видео;
  • frameborder — отображение рамки/границы у фрейма;
  • allowfullscreen — поддержка полноэкранного режима.

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

Вставка видео в WordPress и не только

Теперь рассмотрим самый простой способ как вставить видео с Youtube на сайт WordPress. Данную систему использует большинство блогов и не только. Сначала пару слов о реализации через текстовый редактор, о чем я говорил выше, а потом покажу вариант с HTML.

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

Чтобы вставить видео на сайт WordPress:

  1. Заходите в админку своего веб-проекта и выбирайте добавление/редактирование записи.
  2. Затем в текстовом редакторе просто размещаете ссылку на Youtube видео.
  3. В 99% случаев система автоматически преобразует линк (как показано на гифке ниже).

Интересно, что в последних версиях CMS данный прием работает в обеих режимах редактора. В «Визуальном» вы можете сразу увидеть преобразование, а в HTML подмена линка на видео будет видна при сохранении и просмотре опубликованной записи.

Возможно, в других системах такой функции нет, и придется использовать вариант с HTML. В таком случае для вставки видео с Youtube на сайт Joomla будь то или Вордпресс, или любая другая CMS вам нужно:

  1. Зайти в текстовый редактор в режим HTML.
  2. Скопировать код из ютуба в область контента.
  3. Сохранить страницу/запись в том же HTML режиме.

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

Адаптивное видео c Youtube

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

Чтобы реализовать адаптивное видео на сайте вставляете HTML код с Ютуба, Vimeo и любого другого сервиса внутрь нового DIV:

Затем в стилях прописываете:

.adaptive-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;
}
.adaptive-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

.adaptive-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .adaptive-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Тут есть 2 нюанса:

  • Если плеер добавляется через object и embed, то для них также задаете аналогичные стили как с iframe.
  • В первом селекторе стилей параметр padding-bottom: 56.25%; соответствует пропорциям ролика 16:9, если нужен формат 4:3 — используйте значение 75%.

Код проверял, все работает. Данных трех примеров как вставить видео с Youtube на сайт вам должно хватить с головой. Будут какие-то вопросы — пишите в комментариях. Возможно, позже дополню пост, если найду новую инфу.

03.06.17

Источник: http://tods-blog.com.ua/web-development/vstavka-video/

Адаптивное видео с Ютуба на свой сайт самостоятельно!

адаптивное видео с ютуба

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

Даже если Вы не большой знаток всяких там кодов HTML и CSS, то Вы все равно быстро и без особого труда разберетесь, как создать адаптивное youtube видео на сайте, если он вдруг не поддерживает данную функцию.

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

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

И само собой, если ваше видео не будет отображаться на сайте должным образом, то посетитель обязательно уйдет от Вас. Этого нельзя допустить!

И если Вы столкнулись с такой проблемой, и ваш сайт, например лендинг, не адаптирует вставленное видео с Ютуба как это положено, то этот материал именно для Вас!

Так давайте же быстренько разберемся с проблемой, как сделать адаптивное видео с Ютуба на своем сайте. Поехали …

Адаптивная верстка видео всталенного с Ютуба на сайт — Как это сделано?

адаптивное видео

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

Этот способ исправления адаптивности видео подойдет любому пользователю, так как он прост в использовании и совершенно бесплатен! Данный лайфхак, назовем его так, будет выглядеть вот таким образом …

Вы берете простой код с Youtube для вставки видео на сайт, думаю каждый знает где его можно взять, а если нет, то смотрите вот эту картинку и сразу все поймете:

адаптивное youtube видео

А в этой статье, Вы сможете прочесть и узнать самый лучший способ продвинуть и раскрутить канал на Ютуб быстро и дешево!

Теперь дальше по теме, а то что-то я отклонился от нее …

Скопированный код видео с Ютуба Вам нужно обернуть в div с классом videoWrapper и это будет выглядеть примерно вот так:

;

Далее необходимо добавить стили CSS в свой файл стилей style.css, ищите его в вашей активной теме оформления сайта. Вот эти стили:

.videoWrapper{ position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;
}
.videoWrapper iframe,.videoWrapper object, .videoWrapper embed{ position:absolute; top:0; left:0; width:100%; height:100%;
}

Вот и все, что требовалось сделать, чтобы видео с ютуба стало адаптивным!

Да, вот посмотрите классное адаптивное видео с Ютуба, которое Вас не оставит равнодушным, так как эта музыка просто завораживает:

Думаю, что оно Вам должно понравиться? Не так ли?!

Источник: https://pribylwm.ru/dlya-sajta/adaptivnoe-video-s-yutuba.html

Ссылка на основную публикацию