Медиа-сервис YouTube это не только набор смешных роликов, но и масса полезных видео-материалов, расположив которые у себя на сайте вы можете получить несколько значимых плюсов. Поэтому в данной статье я расскажу о том, как на сайте вывести случайное видео YouTube при помощи библиотеки jQuery буквально за 10-15 минут.
Сами преимущества. С точки зрения поисковой оптимизации — это увеличение поведенческих факторов, как за счет самих роликов, так и за счет прироста постоянной целевой аудитории. Ведь, если в интернете многие статьи одной тематики похожи как две капли воды, то пользователь выберет тот сайт, где ему будет интереснее, даже если он ищет информацию о ядерном синтезе, а интересное это ролики про котиков.
С точки зрения удовлетворения запросов пользователей — все просто. Приятный бонус в виде лишних 5 минут смеха или же полезной и интересной информации, со всем вытекающим отсюда. Помните, что сегодня в интернете люди тратят неимоверное количество времени и объемы трафика для многих уже не имеют значения.
Embed a YouTube Video into Your Website using HTML
Но, прежде хотел бы добавить пару слов. Этот метод не является плагином (модулем, компонентом или чем-то подобным) и его можно использовать практически на любом сайте, где есть jQuery. Кроме того, совершенно не используется API (программный интерфейс от ютуба), который от года к году меняется и сегодня уже требует получения специального ключа. Такой подход позволит вам не бегать со взъерошенной головой при каждой смене версии API.
Но, перейдем к самому методу.
Как на сайте вывести случайное видео YouTube с помощью jQuery
Итак, как на сайте вывести случайное видео YouTube с помощью jQuery:
1. Первым делом, нам понадобятся сами коды видео. Если они у вас уже есть в виде массива JavaScript, то можете пропустить несколько пунктов и перейти к 7-му. Если же кодов нет, то идем дальше. Я буду рассматривать пример для видео с одного из каналов (абстрактного).
2. Откройте нужный вам канал на YouTube. Перейдите на вкладку «Видео». Затем пролистайте вниз страницу и загрузите столько видео, сколько есть, при помощи кнопки «Eще». Порядок сортировки не обязателен, так как видео будут выбираться случайным образом.
3. Теперь, откройте панель отладки на странице канала с роликами, например, использовав комбинацию » Ctrl + Shift + i » (большинство браузеров ее поддерживают). А затем перейдите на вкладку «Консоль» (Console).
4. Вставьте следующий код и нажмите Enter:
var resultArray = []; for(var i = 0; i < document.getElementsByClassName(‘yt-ui-ellipsis-2’).length; i++) resultArray.push(document.getElementsByClassName(‘yt-ui-ellipsis-2’)[i].href);
Этот код позволит нам получить все ссылки в виде js массива.
5. Теперь перейдите на вкладку «Источник» (Sources) и в области «Смотреть» (Watch) введите следующий код:
‘[» + resultArray.join(»,») + »]’
Полученное значение скопируйте и сохраните во временном текстовом файле.
6. Теперь, приведем к порядку js массив. Для этого во временном текстовом файле первым делом удалите двойные кавычки вначале и в конце (если они вставились), а так же удалите начало ссылок до самих кодов — вот эту часть «. /watch?v=», чтобы остались только значения вида «AQoHjMr0vvY».
7. Создайте div или другой html тег в том месте вашего сайта, где вы собираетесь выводить случайное видео с YouTube. Обязательно у тега укажите атрибут «id» со значением «idYouTubeRandom». Вот пример:
Примечание: Если вы хорошо знакомы с тем, как использовать селекторы jQuery, то сделайте как вам угодно.
8. Откройте файл с вашими скриптами на сайте (js) и поместите следующий код:
jQuery(function () < var youTubeEmbededCodes = [‘zocP815XI-E’,’kSS3mrIN-BE’,’aXJosnJuKuY’], height = 400, width = 800 ; jQuery(‘#idYouTubeRandom’).html( ‘‘ ); >);
youTubeEmbededCodes — это тот полученный нами массив с кодами видео
height — размер видео по высоте
width — размер видео по ширине.
9. Сохраните скрипт, очистите кэш (если он у вас используется на сайте) и перезагрузите страницу.
10. Теперь, при каждом открытии страницы, где вы расположили блок под видео с YouTube, будет динамически отображаться случайный ролик.
Как видите, ничего сложно нет в том, чтобы на сайте вывести случайное видео YouTube с помощью jQuery. Вся установка занимает от силы 15 минут. Кроме того, вы можете добавлять сколько угодно кодов ютуб роликов без каких-либо ограничений. Например, объединив наборы кодов с нескольких каналов или просто добавив отдельные коды простой правкой JavaScript. Плюс каких-то проблем со совместимостью с API у вас не будет.
☕ Понравился обзор? Поделитесь с друзьями!
Источник: ida-freewares.ru
Эффективный способ размещения видео с YouTube
Небольшой скрипт на jQuery для быстрого, красивого и эффективного размещения видеороликов с YouTube на страницах вашего сайта.
Возможности:
- Добавление видео одним элементом div с атрибутом youtube
- Возможность устанавливать свой эскиз добавив атрибут poster
- Ширина видеоролика задается в 100%, что позволяет ему правильно отображаться в любом контейнере и на любом экране.
- Видео не загружается до тех пор, пока не запущено вручную, что не вредит скорости загрузки страницы.
- Оформление рамки и кнопки плей под стиль сайта.
Примеры:
Постер с YouTube
Свой постер
HTML:
Где атрибут youtube — это ID видео, а постер берется в формате sddefault с обрезкой под 16:9. Другие форматы можно выбрать в теме про ссылки на эскизы и заменить путь в JS.
Где атрибут poster — путь к собственной картинке, которая также будет обрезаться под формат 16:9.
CSS:
.youtube-wrap <
position : relative ;
max-width : 800px ;
margin : 20px auto ;
border : 6px solid #BFE2FF ;
box-shadow : 0 4px 12px rgba ( 0,0,0,0.2 ) , 0 16px 20px rgba ( 0,0,0,0.2 ) ;
.youtube-wrap div[youtube] <
position : relative ;
padding-bottom : 56.25% ;
background : #000 ;
cursor : pointer ;
.youtube-wrap div[youtube]:before <
border-radius : 50% ;
background-color : rgba ( 0, 0, 0, 0.5 ) ;
border : 6px solid #BFE2FF ;
width : 80px ;
height : 80px ;
box-shadow : 0 8px 26px rgba ( 0,0,0,0.4 ) , 0 28px 30px rgba ( 0,0,0,0.3 ) ;
position : absolute ;
left : 20px ;
/* Кнопка по центру */
transform: translateX(-50%) translateY(-50%);
transition : 0.5s ;
background-image : url ( «data:image/svg+xml;charset=UTF-8,%3csvg width=’80’ height=’80’ viewBox=’0 0 24 24′ stroke=’%23BFE2FF’ fill=’%23BFE2FF’ stroke-linecap=’round’%3e%3cpolygon points=’5 3 19 12 5 21 5 3’%3e%3c/polygon%3e%3c/svg%3e» ) ;
background-repeat : no-repeat ;
background-size : 60% ;
background-position : 60% 50% ;
.youtube-wrap div[youtube]:hover:before <
background-color : rgba ( 0, 0, 0, 0.7 ) ;
border : 6px solid #FFF ;
.youtube-wrap div[youtube].show:before,
.youtube-wrap div[youtube].show:after <
display : none ;
.youtube-wrap div[youtube] iframe,
.youtube-wrap div[youtube] img <
position : absolute ;
width : 100% ;
height : 100% ;
.youtube-wrap div[youtube] img <
object-fit : cover ;
object-position : 50% 50% ;
.youtube-wrap div[youtube]:before <
width : 60px ;
height : 60px ;
border : 4px solid #BFE2FF ;
jQuery:
$ ( ‘div[youtube]’ ) . each ( function ( ) <
$ ( this ) . wrap ( ‘ ‘ ) ;
let youtube = $ ( this ) . attr ( ‘youtube’ ) ;
let image = $ ( this ) . attr ( ‘poster’ ) ;
$ ( this ) . html ( ‘+ image + ‘» />’ ) ;
$ ( this ) . html ( ‘+ youtube + ‘/sddefault.jpg» />’ ) ;
$ ( ‘div[youtube]’ ) . click ( function ( ) <
if ( ! $ ( this ) . hasClass ( ‘show’ ) ) <
$ ( this ) . addClass ( ‘show’ ) ;
$ ( this ) . append ( ‘‘ ) ;
$ ( this ) . children ( ‘img’ ) . fadeOut ( ‘slow’ ) ;
Нравится 19
В закладки
- Опубликовано: 03.06.2022
- Рубрики: Фото, аудио и видео
- Метки: jQuery, Авторское, Видео
- 3266 просмотров
Смотрите также:
Группа из 4-х секций
Группа из 4-х секций, каждая из которых раскрывается в их контейнере
Имитация книги из фотографии
Трансформация фотографии в обложку объемной книги средствами CSS
Слайдер фоновых изображений Vegas
jQuery плагин Vegas, его установка, настройки, анимация, методы, события и примеры
Добавить комментарий:
Ваш комментарий отправлен!
Комментарии:
Владимир: 12.02.2023 в 08:04
Доброго времени суток уважаемый. Вопрос, почему некоторые скрипты невозможно вынести во внешний файл, включая данный на ютуб? Он не срабатывает если например создать youtub.js и разместить его хоть до, хоть после разметки.
Alexander: 13.02.2023 в 13:02
Все возможно и даже желательно выносить в 1 внешний файл со всеми скриптами.
Если не работает, нужно смотреть какую выдает ошибку.
Владимир: 14.02.2023 в 13:57
Мне тяжело скрипты даются, максимум подредактировать могу что-то. Замечаю всякие мелочи вроде того что недостаточно просто удалить строку в скрипте, чтобы удалить с сайта тот или иной элемент. Он просто не будет исполняться.
Но вот тут вопрос встал так,скрипт рабочий, а во внешнем файле не работает.У вас я заметил тоже он в страницу встроен.
Я подозреваю приоритет играет свою роль при конфликте с другими скриптами.
Alexander: 14.02.2023 в 14:39
У меня почти все в страницу встроено, так удобнее статью сформировать.
Дайте ссылку на ваш результат
Владимир: 16.02.2023 в 12:26
Да спасибо не будем этому лишнее внимание уделять. Думал может есть сходу какое то правило о котором я не знаю. Это скорее всего конфликт какой-то.
Источник: atuin.ru
Как узнать код html видео
HTML-код видео может понадобиться для вставки содержимого в блог, форум, страницу сайта и так далее. Также он часто используется при скачивании видео при отсутствии прямой ссылки на загрузку файла.
Статьи по теме:
- Как узнать код html видео
- Как открыть html-код
- Как узнать html код для картинки
Инструкция
На странице с нужной видеозаписью проверьте наличие блока с кодом для вставки в блог или других целей. Обычно это делается достаточно редко, однако некоторые ресурсы поддерживают данную функцию. Также данную информацию можно получить, установив предварительно дополнительный элемент для просмотра исходного кода записи.
В случаях когда на странице отсутствует код видео узнайте его по исходному коду. Это делается по-разному во всех браузерах, в некоторых через меню «Вид», в некоторых из контекстного меню и так далее. Нажмите на пункт просмотра исходного кода страницы и найдите ссылку на файл с расширением видеозаписи, чаще всего встречается .flv. Скопируйте ссылку, отделив ее от остального текста.
Если вы часто собираетесь пользоваться функцией скачивания видеозаписей с различных сайтов вроде youtube.com или vkontakte.ru, скачайте и установите в ваш браузер специальный плагин для загрузки мультимедийного содержимого. Вы можете их найти из меню браузера, как, например, в обозревателе Mozilla Firefox или на различных тематических сайтах, посвященных программе.
При выборе плагинов будьте предельно внимательны, поскольку многие используют их в качестве шпионских и вредоносных программ, которые воруют cookies, после чего ваши аккаунты на различных сайтах могут быть использованы в мошеннических целях. Лучше всего выбирайте для установки те элементы, которые имеют больше всего положительных отзывов пользователей.
Если вам необходимо скачать видеозапись, загрузите ее полностью в окне браузера, после чего откройте папку на вашем компьютере, куда сохраняются временные файлы, загружаемые из интернета. Найдите в нем просматриваемую видеозапись и скопируйте ее в другую папку компьютера. Делать это нужно быстро, пока временная папка не очистится самостоятельно.
Полезный совет
Чаще проверяйте устанавливаемые в браузер дополнения.
Совет полезен?
Статьи по теме:
- Как найти видеоклип
- Как просмотреть код программы
- Как вставить видео на форум
Добавить комментарий к статье
Похожие советы
- Как узнать информацию о видеофайле
- Как загружать ролики с Youtube на компьютер
- Что такое html-код страницы сайта
- Как скачать видео с Ютуба на компьютер
- Как качать с яндекс видео в 2017 году
- Как проверить на читы
- Как получить исходник
- Как поставить кавычки елочки
- Как установить расширение firefox
- Как сделать подсказку HTML
- Как вставить код в блог
- Как удалить избранное видео из YouTube
- Как скачать видеозапись Вконтакте
- Как перевести в divx
Источник: www.kakprosto.ru