Лёгкое добавление на сайт видеоролика YouTube

Этот коротенький пост будет посвящён наипростейшей прописке кода видео в статье блога. И к тому же (кому интересно) подкрасим его “значениями свойств” CSS, предав симпатичность и визуальную лёгкость.

Как вы припоминаете из прошлой статьи, в которой мы рассматривали способ прописки кода видео, используя плагин шорткодов Shortcodes Ultimate, – в сегодняшней, я обещал рассказать как это делается без плагина. Итак:

Чтобы добавить какое-то кино к себе на сайт, нужно совершить несколько лёгких движений:

как правильно добавить видео на страничку блога без плагина

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

Как этот код добыть, или – где расположен html код видео на канале Ютюб!? .

..переходим на видеохостинг  YouTube, отыскиваем нужное видео.

Далее определяемся, ибо существуют несколько вариантов кода для прописки роликов:

1-й – наводите на видео курсор, щёлкаете правой кнопкой мыши и во всплывающем окошке выбираете “получить код для встраивания”. Копируете!

2-й – как и в предыдущей статье …жмём “поделиться” далее кликаем “html-код” (фото).

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

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

<iframe width="420" height="315" src="https://www.youtube.com/embed/PKff9ffhoHg" frameborder="0" allowfullscreen></iframe>

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

Ну давайте, чтоб потом не путаться в размерах CSS: задаём (первый) ширина – 320 и второй (высота) – 200.

Всё! …остаётся только прописать этот код в тело статьи, в нужное место.

Внимань! прописывать в редакторе html (не в визуальном)

Теперь под занавес ещё один штрих: CSS-овый вольт код, который вам нужно добавить к себе в файл стилей style.css.

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

.teni{width:320px;/*ширина*/
height:200px;/*высота*/
margin:15px 4px; /*отступы*/
border:1px solid #fefefe; /*каёмка (бордюр))*/
box-shadow:0px 9px 27px #4A4A4A; /*тени*/
}

Что жж, если код css прописан в файл стилей, то остаётся только обернуть дивами код html, полученный на канале YouTube. Т.e. должно получиться так:

<div class="teni">ВАШ HTML КОД</div>

И ещё! …так же обратите пристальный взор на возможности вашей темы, ибо варианты ширины и высоты могут заметно ломаться –  так что регулируйте. У меня, к примеру, нужно было точно задавать размеры как в коде, так и в значении селектора CSS.

наилегчайшее добавление на страничку видеоролика YouTube

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

Кнопочка прибавится в вашем html редакторе VIDEO, кликнув на которую выскочит модальное окошко, в которое и нужно что прописать финальный кусочек ссылки нужного ютюб-видео…

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

/*** НОВАЯ КНОПКА ВИДЕО ***/
add_action( 'admin_print_footer_scripts', 'html_button_class' );
function html_button_class() {
if ( wp_script_is('quicktags') ){
?>
<script type="text/javascript">
QTags.addButton( 'my_prompt', 'VIDEO', div_class);
function div_class() {
var new_class = prompt( 'Добавте финал ссылки видео', '' );
if ( new_class ) {
QTags.insertContent('<div class="teni"><iframe src="https://www.youtube.com/embed/' + new_class + '?controls=0&amp;showinfo=0" style="border:0" width="320" height="200" allowfullscreen="allowfullscreen"></iframe></div>');
}
}
</script>
<?php
}
}
/*** НОВАЯ КНОПКА ВИДЕО ***/

В следующей статье мы будем учиться добавлять личные кнопочку в текстовый редактор, для того – чтобы быстренько прописывать в нужном месте статьи ГОТОВЫЙ html, уникальные css-блоки, коды. Щёлк и – всё, дорогой товарищ..!

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

А это кино о том, как…