5-я версия шаблона-фреймворка для создания сайтов на Joomla — Gantry. Фреймворк состоит из шаблона и компонента-билдера страниц.
Видео на канале Joomla NXT от TechJoomla: Зависимые пользовательские поля Joomla: как использовать
При создании расширений Joomla у разработчиков есть возможность скрывать или показывать поля в зависимости от значений других полей (conditional fields). Это реализуется в XML-файле формы расширения (модуля, плагина или компонента) с помощью атрибута showon=»тут условия» (ссылка на документацию ниже).
Метатеги страниц сайта: title, description, keywords, robots и другие.
Что такое метатеги, как их правильно заполнять и куда добавлять. Обновлённый гайд на PR-CY, будет полезна новичкам.
Источник: joomlaforum.ru
Как я могу автоматически воспроизвести видео, используя новый стиль встраивания кода для Youtube?
Я не могу понять, как автоматически воспроизводить видео, используя новый стиль встраивания кода для Youtube . Я попытался добавить autoplay=1 не работает. Может кто-нибудь сказать мне, как это сделать? Спасибо
Embed ANY YouTube Video and Autoplay it in HTML
Это устарело. ‘mute = 1’ требуется сейчас. См .: Ответ на статью StackOverflow
Да, мне нужно было добавить? Autoplay = 1 ?» , все параметры ПОСЛЕ того, что должно быть добавлено с «. Если бы вы имели, например, «? Rel = 0 rel = 0», и они оба работали бы.
Этот ответ по-прежнему работает в 2016 году. Просто добавив информацию, так как это первый результат, который появляется в Google.
Некоторое дополнительное объяснение, так как это так высоко в результатах goog. Часть URL, следующая за ‘?’ это строка запроса, и вам нужен ключ «autoplay» со значением «1». Так, например, ‘. / embed / JW5meKfy3fY? Autoplay = 1? Rel = 1’ также будет неправильным, потому что тогда у вас будет «autoplay» со значением «1? Rel = 1». Строка запроса начинается с ‘?’ и разделяется на пары ключ = значение символом «autoplay» согласно developers.google.com/web/updates/2017/09/… чтобы ваш iframe выглядел как:
На самом деле, вам придется использовать «?» вместо «» в цепочку.
Например, если вы хотите добавить автозапуск и скрытые субтитры, вам нужно будет добавить эту часть во встроенный URL-адрес видео 😕 Autoplay = 1 http://www.youtube.com/embed/8v_4O44sfjM» добавьте ?autoplay=1 параметр
Так что код будет выглядеть так:
Я попробовал это в своем блоге, и это работает! Надеюсь это поможет (:
Единственный способ заставить работать автоигру — использовать API-интерфейс iframe.
// Load the IFrame Player API code asynchronously. var tag = document.createElement(‘script’); tag.src = «https://www.youtube.com/player_api»; var firstScriptTag = document.getElementsByTagName(‘script’)[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Replace the ‘ytplayer’ element with an and // YouTube player after the API code downloads. var player; function onYouTubePlayerAPIReady() < player = new YT.Player(‘ytplayer’, < height: ‘480’, width: ‘853’, videoId: ‘JW5meKfy3fY’, playerVars: < ‘autoplay’: 1, ‘showinfo’: 0, ‘controls’: 0 >>); >
Ничто из вышеперечисленного не работает для меня в текущей вставке YouTube. Попробуйте это, на самом деле это работает для меня 🙂
Измените это на:
Никто из вас не решил мою проблему. Но я нашел хорошее решение для меня, чтобы работать правильно прямо сейчас. Между тегами напишите этот код:
Автоматическое воспроизведение YouTube работает только на настольном компьютере, для работы на мобильном устройстве необходимо внести изменения в JavaScript. подобно
var tag = document.createElement(‘script’); tag.src = «https://www.youtube.com/iframe_api»; var firstScriptTag = document.getElementsByTagName(‘script’)[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() < player = new YT.Player(‘player’, < videoId: ‘VideoID’, playerVars: < ‘autoplay’: 1, ‘rel’: 0, ‘showinfo’: 0, ‘modestbranding’: 1, ‘playsinline’: 1, ‘showinfo’: 0, ‘rel’: 0, ‘controls’: 0, ‘color’:’white’, ‘loop’: 1, ‘mute’:1, // ‘origin’: ‘https://meeranblog24x7.blogspot.com/’ >, events: < ‘onReady’: onPlayerReady, // ‘onStateChange’: onPlayerStateChange >>); > function onPlayerReady(event) < player.playVideo(); player.mute(); >var done = false; function onPlayerStateChange(event) < if (event.data == YT.PlayerState.PLAYING !done) < setTimeout(stopVideo, 6000); done = true; >> function stopVideo()
Источник: qastack.ru
Отложенная загрузка видео
Как сделать отложенную загрузку изображений описано здесь. Теперь сделаем отложенной загрузку видеороликов, в частности подгружаемых с видеохостингов YOUtube и Vimeo.
Отложенная загрузка iframe YOUtube
Из исходного iframe потребуется только ID (в примере ниже — hr8DOsAdtqQ)
Который необходимо прописать в специальный атрибут:
Скрипт, который берет ID и при нажатии на кнопку play подгружает видео
( function() < var youtube = document.querySelectorAll( «.youtube» ); for (var i = 0; i < youtube.length; i++) < var source = «https://img.youtube.com/vi/»+ youtube[i].dataset.embed +»/sddefault.jpg»; var image = new Image(); image.src = source; image.addEventListener( «load», function() < youtube[ i ].appendChild( image ); >( i ) ); youtube[i].addEventListener( «click», function() < var iframe = document.createElement( «iframe» ); iframe.setAttribute( «frameborder», «0» ); iframe.setAttribute( «allowfullscreen», «» ); iframe.setAttribute( «src», «https://www.youtube.com/embed/»+ this.dataset.embed +»?rel=0autoplay=1″ ); this.innerHTML = «»; this.appendChild( iframe ); >); >; > )();
Чтобы видео автоматически воспроизводилось:
youtube[i].addEventListener( «click», function() < var iframe = document.createElement( «iframe» ); iframe.setAttribute( «frameborder», «0» ); iframe.setAttribute( «allowfullscreen», «» ); iframe.setAttribute( «allow», «accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» ); iframe.setAttribute( «src», «https://www.youtube.com/embed/»+ this.dataset.embed +»?autoplay=1″ ); this.innerHTML = «»; this.appendChild( iframe ); >);
Если нужно с параметрами lazyload для изображений:
//image.src = source; image.classList.add(‘lazy’); image.setAttribute(«data-src», source);
CSS нужен для предварительного показа скриншота ролика и вывода кнопки play
/* Lazyload iframe YOUtube */ .youtube < background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; width: 100%; >.youtube img .youtube .play-button < width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px; >.youtube .play-button:before < content: «»; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; >.youtube img, .youtube .play-button .youtube img, .youtube iframe, .youtube .play-button, .youtube .play-button:before .youtube .play-button, .youtube .play-button:before .youtube iframe
Отложенная загрузка iframe Vimeo
С Vimeo немного посложнее, потому что номер в ссылке на превью не совпадает с номер самого видео. В остальном все тоже самое, берем ID видео
и прописываем его в тот же атрибут:
Скрипт немного видоизменяем под vimeo
( function() var vimeo = document.querySelectorAll( «.vimeo» );
for (var i = 0; i < vimeo.length; i++) < var source = «https://i.vimeocdn.com/video/»; //можно поставить произвольную заглушку var image = new Image(); image.src = source; image.addEventListener( «load», function() < vimeo[ i ].appendChild( image ); >( i ) ); vimeo[i].addEventListener( «click», function() < var iframe = document.createElement( «iframe» ); iframe.setAttribute( «frameborder», «0» ); iframe.setAttribute( «allowfullscreen», «» ); iframe.setAttribute( «webkitallowfullscreen», «» ); iframe.setAttribute( «mozallowfullscreen», «» ); iframe.setAttribute( «src», «https://player.vimeo.com/video/»+ this.dataset.embed + «?autoplay=1»); this.innerHTML = «»; this.appendChild( iframe ); >); >; > )();
Если нужно видео добавить свойства loop и autopause, то после записи ?autoplay=1 нужно добавить autopause=0
Стили CSS абсолютно те же самые, только поменять .youtube на .vimeo
Альтернативное решение для подгрузки роликов YouTube
Немного проще код, но предварительные изображения нужно подставлять вручную
.YoutubeBlock .YoutubeBlock img
$(document).ready(function() < $(«.YoutubeBlock»).click(function() < var width=»100%» height=»315″ src=»https://www.youtube.com/embed/’+ID+’?autoplay=1″ frameborder=»0″ allow=»accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» allowfullscreen>’); >); >);
Поделиться в соц. сетях:
Источник: opttour.ru