возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2024-02-13 в теме: WordPress без плагинов
Запросто с WordPress создание и продвижение сайтов ATs media

Лёгкое добавление на сайт видеоролика 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
}
}
/*** НОВАЯ КНОПКА ВИДЕО ***/

 

 

 

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

 

 

 

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

Требуемые для перепрописки строки 7 и 11

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

 

 

 

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

 

 

 

Важное!! будет полезно прочесть Как правильно пользоваться шорткодом или кнопками в HTML редакторе чтобы избежать множества ошибок связанных с использованием расширений…

 


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

 

 

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

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

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

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

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


  1. Предположим, на фреймы ругаются поисковики. Есть альтернатива. Как ее реализовать, не сваяете статью под заказ, уважаемый автор, или Вы работаете по строгому плану? :)

    Ответить - Надежда

    • Предположим!..
      …есть вариант предположить, что я работаю исключительно по-своим бесшабашным планам и правилам.
      А посему можно и сваять… Заказ дело хорошее, как ни крути. Ибо после нескольких сработанных таким образом текстов, – мобилизуешься, ибо рамки заказчика властители мастерства.
      Даже жалею, что нынче нет БенкендорфоFF: высказался… что городничий дурак – расстрел.

      Посему заказ – есть дело НЕОГРАНИЧЕННО НУЖНОЕ автору.

      С поклоном… пошутили на славу… ))))))))))

      Ответить - Михаил

      • Дабы не досаждать Вам хаотичностью своих вопросов в комментариях и не отвлекать от нужных дел (сама дурью мучаюсь, потому что с 6 утра думать уже нечем особенно), задам последний: графику отдельно делаете для сайтов? Пока имею в виду только картинку в шапку.

        Ответить - Надежда

  2. Предположим!..
    …есть вариант предположить, что я работаю исключительно по-своим бесшабашным планам и правилам.
    А посему можно и сваять… Заказ дело хорошее, как ни крути. Ибо после нескольких сработанных таким образом текстов, – мобилизуешься, ибо рамки властители мастерства.
    Даже жалею, что нынче нет БенкендорфоFF: высказался… что городничий дурак – расстрел.

    С поклоном…

    Ответить - Михаил

  3. Делаю всё в куче…

    Никаким таким академическим подходом к вёрстке своих шаблонов (коих пока мало-мало)) похвастаться не можу.
    Всё зависит от заказа: и шапошные картинки и графики…
    Потом думаю туго.
    А потом, от своих грандиозных задумок отсекаю ненужное…
    Совсем как скулптор тот)

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

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

    Так шты…

    Ответить - Михаил