! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама.?.
Здравствуйте !
написано: — 
отредактировано: 2018-04-22
издатель:  в теме: Контент, шапка site: кодингS реплики: 1 комментарий
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

Как добавить на сайт видео: например с YouTube канала

Недавно одному клиенту кроме всего прочего установил в текстовый html редактор кнопочку добавления видео с видеохостинга youtube. Реализация этакого чуда проста как ни что иное: всего-то добавляете предложенный ниже код в свой файл functions.php (или какой-то плагин) как тут же в редакторе появится удобная кнопка.

Чем она замечательна? 1 — после клика… всплывает такое окошко, в котором нужно указать ссылку на требуемый ролик; 2 — в двух следующих окнах указать высоту экрана видео и ширину (в px). Таким образом мы сможем регулировать размеры окна в соответствии с организацией текста той или иной статьи.

В общем-то, нынче не так уж и сложно добавить видео с канала Ютуб: редактор организует всё за нас, стоит только прописать ссылку на ролик… Но это «удобство», как понимаете, никак не регулируется…

В общем, вам решать что и как добавлять к себе на сайт. Моё дело, предложить!

Занавес открывается:


 

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

 

 

 

 

Будет вкратце моя повесть:

 

 

…после прописки нынешнего кода в html текстовый редактор, появится такая как на скрине ниже кнопка (можете назвать кнопку добавления видео как-то иначе, на своё вольное усмотрение).

 

 

 

видео youtube на сайт

 

 

 

После клика (предварительно скопировав требуемую ссылку с видеохостинга ютуб) прописываете её в это симпатичное окошко… (как это делается, подробнее расскажу ниже)

 

 

 

добавляем видеоролик youtube

 

 

 

 

Далее в двух последующих, вводите высоту и ширину видео. Естественно, в px — однако прописывать только цифровые значения: без px !!

 

 

 

 

добавлять видео youtube

 

 

 

 

 

как поделиться видео с Ютуб: где находится или как отыскать ссылку на видео

 

 

 

 

 

Заходим на портал youtube и выбираем понравившееся кино.

 

Под самим видео, чуть ниже… в левой стороне отыщете кнопку «Поделиться»…

 

Кликайте по ней…

 

 

…выскочит такое представление: (отсюда нужно скопировать саму ссылку)

 

 

 

видео youtube на свой сайт

 

 

 

Копируете… однако — внимание !!

 

 

 

Даже если мы просто поместим перекопированную ссылку на страничку редактирования статьи (в визуальном редакторе), то у нас прекрасно всё заработает… …лихо отыграется youtube кино-видео…

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

 

 

 

Чтобы работать с удобствами посредством предложенного ниже кода, нам потребуется от перекопированной с Ютуб канала ссылки только хвостик т.е возьмём только самый финал ссылки — rbo7am94res:

 

Вот так:

 

https://youtu.be/rbo7am94res

 

Только этот уникальный код: rbo7am94res — вот этот «хвостик» и нужно прописать в первое всплывающее окошко (самый первый скриншот).

 

 

 

 

 

код создания кнопки добавить видео youtube — для html редактора Вордпресс

 

 

 

 

 

Итак: вот сам код, который потребуется для реализации кнопки в html редакторе (код абсолютно настроен: как только пропишете к себе, тут же всё и активизируется…)…

 

 

 

/** КНОПКА ВИДЕО - можно задавать размеры экрана видео в модальном окне текстового редактора **/
add_action( 'admin_print_footer_scripts', 'ats_button_class' );
function ats_button_class() {
if ( wp_script_is('quicktags')) {
?><script>
QTags.addButton( 'ats_prompt', 'VIDEO-NASTROYCY', div_class);
function div_class() {
var new_class = prompt( 'Добавте финал ссылки видео', '' );
var newats_class = prompt( 'ширина видео на странице сайта', '' );
var newatss_class = prompt( 'высота видео на странице сайта', '' );
if ( new_class )
if ( newats_class )
if ( newatss_class )
{
QTags.insertContent('НАПОМИНАНИЕ ш-720 в-420<div class="teni-too"><iframe style="border:0" width="' + newats_class + '" height="' + newatss_class + '" src="https://www.youtube.com/embed/' + new_class + '?feature=oembed=0&amp;showinfo=0" allowfullscreen="allowfullscreen"></iframe></div>');
} }
</script>
<?php
} }
/** КНОПКА ВИДЕО - можно задавать размеры экрана видео в модальном окне **/

 

 

 

 

Итогом у нас в текстовом редакторе автоматически добавится такая ссылка: (естественно, опосля задания необходимых величин отображения ролика)

 

 

 

<div class="teni-too"><iframe style="border: 0;" src="https://www.youtube.com/embed/rbo7am94res?feature=oembed=0&amp;showinfo=0" width="720" height="420" allowfullscreen="allowfullscreen"></iframe></div>

 

 

 

Как видите все наши указанные в окошках данные (и ссылка, и высота, и ширина видеоролика присутствуют в сформированной ссылке) — т.е  на своих местах:

 

 

 

Вот статья с более простой реализацией на сайте ссылки на ролик канала Ютуб… Кстати, о работе YouTube Разберёмся зорким оком, почему же на хостинге YouTube запретили монетизацию многих опубликованных законопослушными пользователями видео в частности о монетизации…

…а это статья, в чёткой форме повествует о всевозможных принципах создания кнопок в текстовом редакторе WordPress — и далее по полезным ссылкам статьи.

 

 

 

.teni-too — селектор css возможно настроить по своему усмотрению… А возможно и исключить из кода вовсе.

 

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 


подписка feedburner Online консультация по работе c сайтом на WordPress

 

 

А вот и кино:

 

 

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   YouTube закроет монетизацию для обывателя… как площадку для заработка на видеороликах   Как выбрать хостинг — пошаговые инструкции (обзоры 4 хостингов) — нюансы модного ssl сертифицирования   Убираем циклическую ссылку h1 логотипа на главной странице   Продвижение контентом или нужно настраивать сайт — валидный код шаблона..?   Как к статье добавить блок ссылок на похожие по теме записи сайта   Подключение jQuery библиотеки от CDN Google — рационально!..   Санкции вебмастера Яндекс (фатальные ошибки) — предупреждения, или что это?..   Шаблон RealMik 4.0.2 — создать сайт на wordpress с максимальной выгодой для начинающего блогера   Как добавить свой новый (второй) сайт в Яндекс Директ   Создаём плагин — добавочный файл функций — my-functions.php   Как добавить ссылки на самые комментируемые по времени посты в сайдбар или на страничку   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Как самостоятельно установить в Notepad++ плагин Compare   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess
↔ перетаскивайте ленту ↔
ещё статьи по теме:

смотреть ещё статьи в теме Контент, шапка site: кодингS
меточная навигация:
Старт обсуждений к статье: Как добавить на сайт видео: например с YouTube канала

  1. Да, классно. Раньше немного парился с добавкой видео, хотя и появляются они в моём блоге не часто. Спасибо за простую реализацию с помощью кода. Респект!

    Ответить - Проверяющий

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

  отныне доступен плагин: privacy-policy ©

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика