Fitvid
Fitvid
Брекеты: минусы, трудности, проблемы
Брекет-системы помогли избавиться от комплексов миллионам людей. Это действительно эффективный инструмент, позволяющий.
Как ускорить метаболизм?
Метаболизм (обмен веществ) — это превращение поступивших в организм питательных веществ в энергию и ее расходование.
11 августа 2013 Далее
Береги рубаху снову, а кишечник смолоду. Профилактика paка кишечника
Задумываться об этой деликатной проблеме, конечно, не хочется. Можно сколько угодно отгонять от себя эти мысли.
Сам себе тренер
Упражнение «Вакуум» для плоского живота
Не все спортсмены могут похвастаться отсутствием выпуклого животика. Что уж говорить о тех, кто не увлечен спортом.
Скакалка для похудения
Скакалка — это эффективный портативный тренажер, с которым справится любой человек. Немаловажное преимущество.
Как качать нижний пресс? Пять эффективных упражнений
Накачать красивый, крепкий пресс нелегко. Однако при систематических занятиях первые результаты появляются довольно.
Здоровое питание
В чём польза пароварки? Стоит ли покупать?
Способ приготовления пищи на пару известен человечеству тысячи лет. Азиатская кухня славится мантами, которые.
В чем польза апельсинов и апельсинового сока? Топ-10 причин включить их в свой рацион
Апельсиновый сок является самым популярным в мире. Именно его чаще всего рекламируют и покупают. Апельсиновый.
Завтpaк: до или после утренней зарядки и пробежки?
Многих, кто решил по утрам делать зарядку или совершать пробежку, волнует вопрос, касающийся завтpaка. Когда же.
Фруктовый завтpaк с овсянкой и йогуртом
Предлагаем вашему вниманию рецепт легкого блюда, которое сочетает в себе необыкновенные вкусовые качества и.
Тренажёры и инвентарь
Упражнения для пресса с фитболом
В большинстве залов для фитнеса можно найти крупные мячи — фитболы. Этот инвентарь стал популярным не так давно.
14 декабря 2012 Далее
Как выбрать эллиптический тренажер
Эллиптические тренажеры постепенно вытесняют беговые дорожки и велотренажеры, что вполне объяснимо: в отличие.
Как выбрать велотренажер?
Выбор велотренажера, отвечающего всем вашим пожеланиям относительно функциональности — это на самом деле.
27 сентября 2011 Далее
Как выбрать беговую дорожку?
«Задумал бежать, так нечего лежать!», — эту житейскую мудрость можно отнести ко многим людям, которые неоднократно.
Делаем видео адаптивными в WordPress с помощью FitVids
Когда вы внедряете видео в WordPress, по умолчанию они не являются адаптивными. Учитывая рост адаптивных WordPress-тем, пользователи, которые посещают ваш сайт через девайсы с небольшими экранами, будут видеть растянутые и непропорциональные контейнеры с видео. В этой статье мы покажем вам, как сделать ваши видео адаптивными в WordPress с помощью FitVids.
FitVids – это jQuery-плагин, который позволяет вам сделать ваши видео адаптивными. Если вы хотите использовать его на вашем WP-сайте, то в таком случае вы должны установить и активировать плагин FitVids for WordPress. После активации вам нужно перейти к разделу Внешний вид – FitVids и ввести класс CSS-селектора. WordPress автоматически добавляет класс .post к статьям, так что вы может использовать его.
Читать еще: 7 низкокалорийных овощных гарниров к ужину!В принципе, это все. Сохраните свои изменения и посмотрите сайт. Вам понадобится изменить экран браузера, чтобы увидеть, что видео подстраивается под новые размеры.
Ручное добавление FitVids, чтобы сделать видео адаптивными в WordPress
Если вы по каким-то причинам не хотите устанавливать плагин FitVids for WordPress, вам нужно будет добавить вручную jQuery-плагин FitVids. Первое, что вам понадобится сделать – это скачать и извлечь jQuery-плагин FitVids на свой компьютер. Далее вам нужно загрузить извлеченную из архива папку FitVids.js-master в папку с вашей темой.
Вы должны подключиться к своему сайту через FTP-клиент и открыть папку с темой. Возможно, что ваша тема не имеет вообще папки js. Если ее нет, то вам нужно будет создать ее и затем загрузить папку FitVids.js-master на свой компьютер.
Внутри папки js вам нужно создать новый файл и назвать FitVids.js. Отредактируйте этот файл и поместите внутри него следующий код:
Код выше сообщает FitVids, что нужно найти CSS-класс .post. Теперь, когда FitVids добавлен, вам нужно корректно подключить Javascript к своей теме.
Просто вставьте следующий код в свой файл functions.php:
Как только вы сделаете это, ваши видео будут адаптивными.
Множество различных jQuery примеров , элементы CSS и большое количество других инструментов для Вашего сайта !
Подборка самых популярных WordPress плагинов для любого сайта.
Здесь вы сможете скачать различные jQuery скрипты для любых проектов.
Бесплатно скачать CSS3 наработки с различными эффектами анимации.
Можно скачать файлы HTML5 с современными возможностями разработки.
Множество различных free PSD объектов для WEB-дизайна.
Колекция различных элементов form jQuery для вашего сайта.
Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.
Коллекция всегда обновляющихся модальных окон на jQuery.
Разные примеры jQuery validate собраны в одном месте сайта.
Симпатичные варианты реализации ваших jQuery gallery.
Большой сборник широкоформатных и адаптивных jQuery slider`ов.
Ишите примеры реализации jQuery scroll? Это то, что вам нужно.
Красивые и динамичные всплывающие подсказки на jQuery и CSS3.
Интересные материалы на тему веб разработок, главные новости.
Подобрка плагинов Javascript, библиотек, фреймворков и т.д.
Коллекция потрясающих примеров анимации для вашего сайта.
Модернизация элементов форм, создание систем автозаполнения
Плагины для выбора и настройки даты и времени в формах
Читать еще: Мускатное масло — свойства и применениеПредзагрузчики, анимация загрузки, перлоадеры и т.д.
Компоненты, содержащие в себе реализацию параллакс-эффекта.
Создание вкладок, оформление списков в удобную навигацию.
Все, что касается таблиц с данными: фильтр, сортировка и т.д.
Наработки SVG-графики и наложение на нее анимации. Просто красиво.
Отрисовка элементов на веб-странице с помощью html5 canvas.
Примеры элементов, которые реагируют при наведении на них.
Плагины для фото и видео галерей, способные приблежать контент.
Кнопки. Создание красивы и незабываемых кнопок для сайта.
Все, что касается сортировки данных на странице. Плагины html5.
Выборка данных. Множество примеров jQuery select.
Различные способы создания красивого и эффектного меню для сайта.
Дерево элементов. Построение множественных списков на странице.
Примеры объектов в трехмерном прострaнcтве с помощью CSS3 и jQuery.
FitVids.js — плагин jQuery для работы с видео
Легкий и удобный плагин jQuery для вставки видео с любых ресурсов на ваш сайт. Инструмент позволяет манипулировать интегрированными видео блоками: самостоятельно подбирать оптимальный размер контейнера, обеспечивать корректную работу браузерных дополнений и т.д.
Fitvids v1.0.6 — плагин адаптивного видео для Joomla
скачать архив для Joomla 3.6 | Размер: 0.016 МБ
скачать архив для Joomla 2.5 | Размер: 0.016 МБ
Fitvids это простой плагин для Joomla, который реализует решение Криса Койера и компании Paravel для адаптивного видео. Плагин Fitvids требует javascript и css, чтобы превратить любое видео на вашем сайте в эластичный видео объект.
Зависимости
Fitvids для работы нужно, чтоб на вашем сайте использовалась библиотека jQuery.
Если вы используете какой-либо из шаблонов, относящихся к Zen Grid Framework второй версии, значит все в порядке, и вам не нужно дополнительно что-либо делать.
В противном случае вы можете использовать плагин JB Library или любой другой, позволяющий добавить jQuery на ваш Joomla сайт.
Функции
Превращает любое встроенное видео на вашем сайте и эластичный видео плейер, размеры которого можно изменить.
Используете плагин Allvideo?
Если вы используете плагин Allvideos для отображения видео, то вам интересно будет узнать, что ребята из Joomlaworks выпустили обновление, которое использует адаптивный шаблон. Мы рекомендуем вам использовать адаптивный шаблон Allvideos, а не сам плагин для отображение адаптивных видео.
Порядок плагинов
Пожалуйста убедитесь, что плагин Fitvid отображается после вашего jQuery плагина в интерфейсе администрирования расширений.
Перейдите на страницу расширения> менеджер плагинов
Переместите плагин Fitvids после выбранного метода реализации jQuery на сайте.
Нашли опечатку или неточность в описании? — Выделите фрагмент текста мышкой и нажмите Ctrl + Enter
Адаптивное видео
Вы уже видели, что обеспечение поддержки устаревших браузеров приводит к увеличению объема кода. То, что с тегом поначалу было одной или двумя строками, в итоге превратилось в десять и более строк (и дополнительный Flash-файл) лишь для того, чтобы осчастливить устаревшие версии Internet Explorer! Что касается меня, то я обычно воздерживаюсь от применения Flash-видео в качестве резервного варианта, чтобы итоговый код занимал меньший объем памяти, однако у каждого сценария есть свои отличия.
Читать еще: Как перестать есть многоТеперь единственная проблема с нашим прекрасным внедрением HTML5-видео заключается в том, что оно не является адаптивным. Так и есть. Мы проделали столько тяжелой работы, однако наш веб-дизайн нельзя назвать адаптивным. Взгляните На рисунке 4.7 и постарайтесь всеми силами сдержать слезы.
К счастью, для вложенного HTML5-видео эту проблему легко решить. Просто удалите из разметки все атрибуты height и width (например, удалите width=»640″ height=»480″) и добавьте такой CSS-код:
Несмотря на то что такой способ отлично работает с файлами, которые могут размещаться локально, он не решает проблемы с видео, вложенным в (привет YouTube, Vimeo и др.). Приведенный далее код добавляет на нашу страницу трейлер к фильму «Успеть до полуночи» (Midnight Run) с YouTube:
Рисунок 4.7. При уменьшении размера области просмотра часть видео обрезается
Несмотря на CSS-правило, которое я приводил ранее, вот что получится в итоге (рисунок 4.8).
Я уверен, что Роберт Де Ниро был бы не очень рад увидеть такое! Эту проблему можно решить несколькими способами, однако самый простой из них, с которым мне доводилось сталкиваться, заключается в использовании небольшого jQuery-плагина под названием FitVids. Посмотрим, насколько просто использовать этот плагин, добавив его в код сайта And the winner isn’t.
Прежде всего нам потребуется JavaScript-библиотека jQuery. Добавим ссылку на нее в элемент . В данном случае я использую версию из Content Delivery Network (CDN).
Скачайте плагин FitVids с сайта http://fitvidsjs.com/ (дополнительную информацию о нем можно найти по адресу http://daverupert.com/2011/09/responsive-video-Embeds-with-fitvids/).
Видео по-прежнему обрезается.
Теперь сохраните JavaScript-файл FitVids в подходящей папке (свою я творчески назвал js), а затем добавьте ссылку на него в элемент :
И наконец, остается лишь использовать jQuery и нацелиться на определенный элемент, содержащий наше видео с YouTube. В данном примере я добавил трейлер к фильму «Успеть до полуночи» (Midnight Run) с YouTube в элемент
Вот и все. Благодаря jQuery-плагину FitVids теперь у нас имеется полностью адаптивное видео с YouTube (рисунок 4.9).
Уф! Все исправлено. Это должно поспособствовать сохранению моих дружеских отношений с Робертом!
