Товаров: 0 (0р.)

Сайт html5: Вёрстка на HTML5 | htmlbook.ru

Содержание

Вёрстка на HTML5 | htmlbook.ru

XHTML хорошо подходит для обучения и вырабатывания правильной манеры вёрстки благодаря своим формальным правилам и более жёсткому, по сравнению с HTML синтаксису. Однако за десять лет прошедших со дня выпуска XHTML морально устарел и уже не соответствует современным условиям. В частности, нет штатных средств для проигрывания аудио и видеороликов, нет поддержки геолокации, возможности рисовать непосредственно в браузере, не хватает некоторых элементов форм и много другого. Конечно, часть этих проблем давно решается через сторонние плагины к браузеру, например, Adobe Flash воспроизводит видео, Google Gears реализует локальные базы данных и запуск скриптов в фоновом режиме. Язык программирования JavaScript позволяет реализовать недостающий функционал форм и различные эффекты на странице. Но все эти технологии имеют определённые ограничения — плагины нужно устанавливать дополнительно, при этом они могут не работать, как Flash на iPhone и iPad, далеко не всё умеет и JavaScript. Популярность мобильных устройств, развитие каналов связи переместило акцент веб-технологий на мультимедиа, т.е. воспроизведение потокового аудио и видео, а также соответствующих файлов. Ничего этого в XHTML нет.

W3 Consortium, разработчик спецификаций HTML и XHTML, начал работать над XHTML 2.0, в котором указанные недостатки предыдущей версии бы обходились. В результате этот проект оказался замороженным и не завершён. Обеспокоенные медленным ходом работ разработчики браузеров Safari, Firefox и Opera основали свою собственную организацию WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по разработке гипертекстовых приложений Интернета), которая подхватила упавшее знамя. Идеи W3C, современные потребности пользователей и мнения веб-разработчиков воплотились в новом языке разметки названном HTML5.

Следует понимать, что, несмотря на схожесть названий, HTML5 не является продолжением HTML4 или XHTML. Скорее речь идёт о новом языке Web Applications 1.0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.

Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Итак, что же интересного нам даёт HTML5? Вот некоторые его возможности.

  • Поддержка геолокации — определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.
  • Воспроизведение видеороликов.
  • Воспроизведение аудиофайлов.
  • Локальное хранилище — позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.
  • Фоновые вычисления — стандартный способ запуска JavaScript в браузере в фоновом режиме.
  • Оффлайновые приложения — страницы, которые могут работать при отключении Интернета.
  • Рисование — внутри тега <canvas> с помощью JavaScript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.
  • Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.

Кроме этих возможностей в HTML5 включены новые теги для разметки документа, выброшены устаревшие теги и модифицированы некоторые другие. Для вёрстки веб-страниц в первую очередь необходимо понять, что поменялось и как перевести страницу на HTML5.

Сайт на html5 и сss3

Статья для заказчиков, которая простым языком рассказывает что ждать от сайтов на Html5 и почему фрилансеры Вас разводят на этом.

Вступление: Зачем нужен html и css?

Html и css — Это базовые языки в любом сайте, т.е. на них написан абсолютно любой сайт. Все остальные языки и системы управления нужны чтобы управлять этими двумя.

Вывод: Html и Css действительно очень важные части сайта, поэтому нужно знать как они работают.

В чем главный обман, при создании сайтов на html5 и css3?

Если заказчик спрашивает меня делаю ли я сайты на html5 и css3, то это значит он вообще ничего не понимает в сайтах, но хочет чего-то модного.

1) На самом деле Html5 и css3 появились и применяются уже несколько лет. Как вообще появляются новые версии языка? Это все из-за заказчиков. Каждый год все хотят все более оригинальные сайты, нестандартные дизайны и т.д. Но реализовать на практике то что создал мозг креативного дизайнера бывает очень и очень сложно! Причем речь идет об очень простых вещах: Например изображение с закругленными углами! Кажется банальность? Но еще 2 года назад эта задача вызывала кучу проблем! Поэтому производители браузеров договорились между собой и внесли изменения в свои браузеры. Таким образом появилось новое свойство css, которое отвечает за скругление углов.

Получается, что очень многое из того, что Вы привыкли видеть по-умолчанию, это уже html5 и css3. Т.е. фрилансер может сделать просто текст с тенью или скругленные углы и сказать что Ваш сайт на html5 =)

2) В Html5 и Css3 появилось много вещей, которые облегчают жизнь разработчику, но заказчик не заметит никакой разницы.

Как видно из предыдущего абзаца новый стандарт языка появляется чтобы облегчить жизнь разработчикам. Например раньше все анимации делались на Javascript, а теперь есть возможность их делать на Css. Но Вам как заказчику какая разница на чем сделана анимация на Вашем сайте? Разве Вы сможете отличить одну от другой?

3) Новые функции в разных браузерах могут работать по-разному.

К сожалению, новые свойства внедряются очень медленно. А некоторыми браузерами они не поддерживаются совсем, особенно это касается браузеров на мобильных телефонах и старых Internet Explorer. Тут многие молодые разработчики откровенно халявят и просто массово используют новые свойства, не проверяя их нигде. Заказчик же также проверяет сайт только в том браузере где сидит сам, вот и получается что 30% пользователей увидят Ваш сайт с ошибками.

Чем же полезен Html5 для сайта? Это важно знать!

Html5 помогает продвижению! Представьте что на наш сайт пришел робот яндекса и пытается понять насколько этот сайт полезен и как высоко поставить его в поиске. Но у нас на каждой странице вверху шапка, внизу подвал, слева дополнительное меню и т.п. Каждый из Вас легко поймет что это все повторяется и на каждой странице одинаковое, а читать нужно только то что в центре. Роботы этого не понимают!  В html5 появились специальные теги для обозначения каждого элемента Вашего сайта, они помогают понять роботу что является основным текстом страницы, а что побочной информацией! Этих тегов очень много и большинство Вам никогда не пригодится. Например, есть тег для первого вхождения термина в текст, который потом потом стал аббревиатурой.

Теги, которые на 2015 год поддерживаются всеми браузерами и которые должны быть на сайте:

  1. nav — обозначает главное меню вашего сайта
  2. header — говорит поисковику, что это шапка сайта
  3. footer — подвал вашего сайта
  4. aside — боковая колонка с меню, рекламой и т.п.
  5. article — новость или статья. Используется для списка новостей. Т.е. если у Вас выносятся 3 последние новости на главную, то каждая должна быть в теге article.
  6. section     — очень важный тег для одностраничников. Каждый отдельный блог должен быть в таком теге, а то поисковик вообще не понимает где у Вас кончаются условия доставки и начинается описание товара.

Как проверить используются ли эти теги на Вашем сайте? Для этого я записал небольшое видео, которое появится очень скоро. Просто перешел на Win10 и программка для записи полетела =) Как только восстановлю, так сразу выложу.

Насколько это помогает — наш опыт. На самом деле какой-то объективной статистики нет, т.е. на данный момент никто Вам не скажет насколько Выше Ваш сайт станет в поиске, если в нем заменить все теги на новые, но один яркий пример у меня есть:

Параллельно мы ведем другой сайт, на котором публикуются новости и который есть в сервисе «Яндекс новости». Там мы конкурируем с сайтами, которые были разработаны гораздо раньше и над которыми работают гораздо более серьезные команды. Новости мы берем от этих же конкурентов и просто переписываем своими словами. Для Яндекса очень важна дата публикации новости, т.к. кто первый опубликовал, тот будет самым первым в списке СМИ.

И вот тут вступает Html5: в нем появился новый тег для обозначения даты: date, он позволяет поисковикам показывать время создания новости вплоть до секунды, а обычным пользователям просто дату и час. У конкурентов же старый тег, который показывает только дату и час всем. Таким образом Яндекс с считал именно нас первоисточником и ставил нас выше конкурентов с своем списке.

HTML5 — Руководства Web-разработчика | MDN

Секции и контуры в HTML5
Контурные и секционные элементы в HTML5: <section>, <article>, <nav>, <header>, <footer>, <aside> and <hgroup>.
Использование HTML5 audio и video
<audio> и <video> элементы вставляют и позволяют управлять мультимедиа контентом.
Формы в HTML5
Взгляд на улучшение форм в HTML5: API валидации, несколько новых атрибутов, новые значения для атрибута 
type тега <input> и новый элемент <output>.
Новые семантические элементы
Кроме секций, медиа и форм, множество новых тегов, такие как <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress> и <meter>, увеличено количество валидных HTML5 элементов.
Улучшение <iframe> (en-US)
Использование атрибутов sandbox (en-US), seamless (en-US), and srcdoc (en-US), разработчики могут задать нужный уровень безопасности и осуществить рендеринг тега <iframe> (en-US).
MathML
Позволяет вставлять математические формулы.
Введение в HTML5
Эта статья знакомит вас с тем, как указать на то, что вы используете HTML5 в вашем веб-дизайне или веб-приложении.
HTML5-совместимый парсер
Анализатор, который превращает байты HTML документа в DOM, был расширен и точно определяет поведение, чтобы даже в случае неверного HTML, исход был предсказуемым и одинаков во всех HTML5-совместимых браузерах.

СВЯЗЬ

Web Sockets
Позволяет создать постоянное соединение между страницей и сервером и обмениваться данными через него.
Server-sent события
Позволяет серверу отправлять события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
WebRTC
Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.

ОФФЛАЙН И ХРАНИЛИЩЕ

Офлайн-ресурсы: кеш приложения
Firefox полностью поддерживает спецификацию HTML5 по офлайн-ресурсам. Другие браузеры также имеют поддержку спецификации на должном уровне
Online and offline events
Firefox 3 поддерживает WHATWG online и offline события, которые позволяют приложениям и расширениям обнаружить есть ли активное подключение к Интернет, а также определить, когда соединение портится или улучшается.
WHATWG сессионное или постоянное хранилище (aka DOM Storage)
Постоянное или сессионное хранилище позволяет веб-приложениям хранить структурированные данные на стороне клиента.
IndexedDB
Веб-стандарт для хранения значительных количеств структурированных данных в браузере и для быстрого их поиска, используя индексы.
Using files from web applications
Поддержка HTML5 File API была добавлена в Gecko, сделав возможным веб-приложениям иметь доступ к файлам, выбираемых пользователем. Это включает поддержку множества файлов, используя 
<input> с типом file, имеющих атрибут multiple. Ещё это FileReader.

МУЛЬТИМЕДИА

Использование HTML5 audio и video
<audio> и <video> элементы вставляют и позволяют управлять мультимедиа контентом.
WebRTC
Эта технология, где RTC создаёт возможность общения в реальном времени, позволяет подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешний приложений.
Использование Camera API
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.

ГРАФИКА И ЭФФЕКТЫ

Canvas Tutorial
Узнайте о элементе <canvas> и узнайте, как рисовать графику и другие элементы в Firefox.
HTML5 text API для <canvas>
HTML5 text API сейчас поддерживается в <canvas>.
WebGL
WebGL приносит 3D в веб, соответствует OpenGL ES 2.0, может использоваться в HTML5 через <canvas>.
SVG
Основанный на XML формат векторных изображений, который может быть непосредственно вставлен в HTML.

производительность и интеграция

Web Workers
Позволяет делегировать выполнение JavaScript в фоновые потоки, это позволит предотвратить замедление интерактивных событий.
XMLHttpRequest Level 2
Позволяет извлечь асинхронно некоторые части страницы, что позволяет отобразить динамический контент, изменяющейся время от времени или от действий пользователя. Это технология, лежащая в основе AJAX.
JIT-компилирование движков JavaScript
Новое поколение движков JavaScript гораздо более мощных, приводящих к большей производительности.
History API
Позволяет управлять историей браузера. Это особенно полезно страниц, интерактивно загружающих новую информацию.
contentEditable атрибут: трансформируйте свой сайт в википедию!
HTML5 стандартизировал атрибут contentEditable. Узнайте больше об этой фиче.
Drag and drop
HTML5 drag and drop API позволяет перетаскивать элементы по сайту или на него. Также простейшее API для использования расширениями или иными приложениями.
Управление фокусом в HTML
Поддержка новый атрибутов HTML5 activeElement and hasFocus.
Обработчики протоколов для Web
Вы можете зарегистровать веб-приложения, как обработчики протоколов, используя метод navigator.registerProtocolHandler().
requestAnimationFrame
Контролирует анимации для обеспечения оптимальной производительности.
Fullscreen API
Позволяет использовать весь экран для веб-приложения, без отображения UI браузера.
Pointer Lock API
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.
Online and offline events
Для того, чтобы построить хорошую офлайн-совместимые веб-приложения, вы должны знать, когда ваше приложение без сети. Также, вы должны знать, когда ваше приложение снова вернётся в сеть.

доступ к устройствам

Использование Camera API
Позволяет контролировать, манипулировать и хранить изображения с камеры устройства.
Touch события
Обрабатывает события, создаваемые нажатиями пользователя по тач скрину.
Геолокация
Позволяет браузерам получать местоположение пользователя.
Определение ориентации устройства
Позволяет среагировать, когда устройство, на котором работает браузер, меняет ориентацию. Это может быть использовано в качестве устройства ввода (например, чтобы сделать игры, которые реагируют на положение устройства) или адаптировать компоновку страницы с ориентацией экрана (вертикальная или горизонтальная).
Pointer Lock API
Позволяет блокировать курсор, так чтобы игры и подобные приложения не теряли фокус, когда указатель достигает предела окна.

стилизация

CSS был расширен, чтобы дать возможность стилизировать элементы наиболее оптимальным способом. Его часто называют CSS3, хотя CSS больше не является монолитной спецификацией и различные модули, не все на уровне 3: некоторые на уровне 1, а некоторые на уровне 4, с промежуточными уровнями.

Новые способы стилизирования фона
Новая возможность задать тень элемента, используя box-shadow или установление множественных фонов.
Лучшие границы
Не только изображения можно использовать для стилизирования границы, используя border-image (en-US) или его длинные формы записи, а скруглить уголки можно свойством border-radius.
Анимируйте свой стиль
Используйте CSS Переходы, чтобы анимировать изменение состояния элемента или CSS Анимации для анимации частей страницы без запуска событий, вы теперь можете контролировать мобильные элементы на вашей странице.
Улучшение типографии
Авторы могут лучше контролировать типографию. Например, они могут контролировать text-overflow (en-US) и перенос слов, а также тень текста и его декорирование. Могут загрузить и применить другой шрифт правилом @font-face.
Новые презентационные макеты
Для того, чтобы улучшить гибкость дизайна, добавили: CSS мульти-колоночный макет и CSS отзывчивый блочный макет.

20 самых красивых и творческих сайтов на HTML5

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

Его мультимедийные возможности, позволяют нам сделать потрясающую анимацию с плавными переходами, а также просто вставлять музыку и видео, и делать с этими файлами практически всё.

Сегодня я представляю Вам несколько примеров таких сайтв, которые используют практически все возможности HTML5. Я уверен, что после просмотра вдохновение аж зашкалит 🙂 Наслаждайтесь.

Возможно Вам будут интересны вот эти подборки:

Интересный сайт сделанный с помощью HTML 5. Вам нужно добавить усы к видео на котором находятся разнообразные герои. Это как оказалось не очень и просто сделать 🙂

Необычный сайт. Это как бы история. Почему то этот сайт очень тесно связан с ИЕ9. Я так и не понял, возможно он продвигается с помощью этого браузера. В общем сайт очень крутой с классными историями и музыкой.

Наверное самые красивые иллюстрации на сайте Швейцарского часового. Очень красиво, просто сказочно. И естественно этот сайт сделан на самых новых технологиях HTML5 и JQuery.

Довольно необычный сайт с 3d графикой рок — певицы Бьёрк (Bjork). Красивые 3d элементы добавляют необыкновенную объёмность сайту, в общем нужно зайти и посмотреть.

Необычный сайт на HTML5, в котором нужно переместить компакт диск в указанное место и смотреть видео ролики. Идея просто супер, и очень удобно.

Супер веб — сайт Джеймса Андерсона, который очень любит игру крикет, и таким образом сделал сайт — инфографику с красивой и «живой» статистикой игры.

Сайт популярных джинсов, который использует HTML5 видео, таким образом получилось всё довольно таки очень привлекательно, а главное такие сайты поддерживают абсолютно все браузеры.

Если Вы всё время мечтали научится играть на пианино, то не упустите свой шанс и попробуйте. Правда это довольно необычное пианино, но очень красивое и креативное 🙂

Наглядный пример использования Flash технологий в HTML5. Очень красиво, удобно, и конечно же очень развлекательно.

www.the-bea.st

Замечательный пример творческого сайта, который наглядно показывает все возможности HTML5. Прекрасная и качественная анимация и красивые иллюстрации.

Классный сайт на котором можно посмотреть разнообразные видео со всей планеты. И конечно же этот сайт отчётливо подчёркивает огромные возможности HTML5.

Это стильный цифровой комикс, воплощённый в жизнь с помощью HTML5. Этот сайт доставит огромное удовольствие поклонникам книги.

Это очень красивая и огромная энциклопедия зарубежных сериалов. Очень будет полезна для поклонником.

beta.theexpressiveweb.com

Классный справочник, который был создан компанией Adobe, в котором представлены разные полезности, например как CSS3 анимация и т.д.

Сайт, который показывает использование видео на сайте с помощью HTML5. Создатель видео Крис Молоко, он же и создал этот сайт со своими друзьями из Гугл.

Очень интересный пример использования видео через HTML5, это своеобразный пазл который нужно просто собрать 🙂 Попробуйте, Вам понравится.

Супер пример использования параллакса, HTML5 и JQuery в веб дизайне.

Своеобразная карта, которая наглядно показывает поставку оружия в разные страны мира.

Классный сайт на HTML5. Называется он Счастливый отпуск, я думаю, что тут не нужно подробностей.

Это популярный сайт радиостанции, который использует технологии HTML5, JQuery и плавные переходы с красивой анимацией на CSS3.

Огромное спасибо speckyboy.com

HTML5 — новая версия стандарта

HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).

HTML5 был создан, как единый язык разметки, который расширяет, улучшает и рационализирует разметку документов, а также добавляет единое API для сложных веб-приложений. В HTML5 реализовано множество новых синтаксических особенностей: например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Все эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами без необходимости использования сторонних API. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы сделать веб-страницы более семантичными и понятными для автоматизированной обработки (роботами поисковых систем, программами для чтения с экрана и другими). Новые атрибуты были введены с той же целью. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому всеми совместимыми (современными) браузерами синтаксические ошибки должны рассматриваться одинаково, что обеспечивает более высокую кроссбраузерность для сайтов, которые разработаны на HTML5.

Новое в HTML5:

  • <nav> (блок навигации по сайту)
  • <header> (контейнер для заголовков)
  • <footer> (обычно относится к нижней части страницы)
  • <audio> и <video> (медиаконтент)
  • <article> (контейнер для основного содержания)
  • <section> (разделы страницы)
  • <aside> (контейнер для дополнительного содержания, сносок)
  • <datalist> (выпадающий список)
  • <details> (спойлер)
  • <figure> (группировка элементов)
  • <progress> (шкала прогресса выполнения)
  • <time> (дата/время)
  • <canvas> (холст для непосредственного метода рисования в 2D)
  • API для контроля над проигрыванием медиафайлов
  • хранение баз данных оффлайн на стороне клиента
  • Drag-and-Drop API (перетаскивание)
  • History API (управление историей браузера)
  • геолокация

В настоящий момент все ведущие браузеры поддерживают новый стандарт: Google Chrome, Mozilla Firefox, Opera и даже Internet Explorer (начиная с версии 9) имеют поддержку html5.

Добавляем YouTube видео на сайт — как вставить видео с ютуба

Вы решили добавить видео с YouTube на свой сайт? Это хорошая идея, ведь оно поможет обогатить ваш контент и даст посетителям больше информации. Добавление YouTube видео в разделы сайта «О нас» и «О продукте» значительно облегчает изучение информации о вашей компании и деятельности. Давайте разберем как это правильно сделать.

Почему не HTML тег video?

Стандарт HTML 5 имеет встроенный тег video, который позволяет вам добавлять видео на веб-страницу, указав его расположение в теге source. Однако есть риск, что браузер пользователя не будет поддерживать формат вашего видео, да и добавление нескольких источников довольно хлопотно.

Знание того, как встроить видео YouTube в HTML страницу, избавит вас от многих проблем. Мы будем использовать iframe вместо тега video:

IFrame означает встроенную рамку и позволяет вставлять одну страницу в другую — в этом случае, страницу YouTube. Таким образом, вам не нужно беспокоиться о поддержке формата вашего видео файла.

Как вставить видео YouTube на сайт

Для того, чтобы добавить видео с YouTube на сайт, откройте страницу и найдите кнопку Поделиться под видеоплеером:

Когда вы нажмете на нее, вы увидите несколько вариантов как поделиться видео, в том числе через различные платформы социальных сетей. Самой первой кнопкой в списке будет Встроить. Нажмите на ее, чтобы вставить видео с Youtube на сайт.

YouTube сгенерирует код для вставки автоматически. Тег iframe будет иметь URL исходного видео, высоту и ширину плеера и еще несколько атрибутов:

В нашем случае код будет выглядеть следующим образом: 


HTML
<iframe
    src="https://www.youtube.com/embed/li_9PBrcOcQ"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

Все, что вам нужно сделать — это нажать Копировать и вставить этот код в HTML вашей страницы.

Настройка YouTube видео в HTML5

Теперь, когда вы знаете, как вставлять видео YouTube в формате HTML, вы должны также понять , как модифицировать его под ваши цели. Добавляя некоторые параметры в конце URL адреса видео, вы можете влиять на поведение плеера. Для этого добавьте знак вопроса ? в конце URL, а затем добавить один или несколько параметров и их значения.

Параметр autoplay позволяет начать автоматическое воспроизведение YouTube видео при загрузке страницы. Добавьте autoplay=1 в конец URL чтобы включить автовоспроизведение или autoplay=0 чтобы выключить. 


HTML
<iframe
    src="https://www.youtube.com/embed/li_9PBrcOcQ?autoplay=1">
</iframe>

Параметр loop позволяет зациклить видео, цикл будет длиться, пока пользователь останавливает его вручную. Использование loop=1 запустит видео снова после того, как она закончится, а loop=0 остановит видео после первого воспроизведения.

Параметр playlist установит плейлист на вашем сайте, несколько YouTube видео будут воспроизведены один за другим в последовательном порядке. Это позволит создать личный список воспроизведения на вашем сайте.

Посмотрите еще несколько параметров, которые вы можете использовать в таблице ниже:

Параметр

Значение

color

При установке значения white, уже просмотренная часть видео будет выделена белым в прогрес баре.

disablekb

При установке значения 1, видеопроигрыватель не будет реагировать на управление с клавиатуры

fs

Если установлено значение 0 , кнопка полноэкранного режима будет добавлена в плеер

modestbranding

При установке значения 1 , видеоплеер не будет показывать логотип YouTube

Как встроить видео YouTube: Полезные советы

  • Перед копированием кода с YouTube, вы можете выбрать время начала воспроизведения. Вы также можете выбрать, следует ли добавлять в плеер элементы управления видео.
  • Не забывайте про авторские права — это незаконно использовать творение других людей, для получения прибыли без их разрешения.

Ленивая загрузка встроенных видео

Если вы планируете добавит несколько видео на страницу, то можете столкнуться со значительным увеличением времени загрузки. Пользователь может быть даже не запустит плеер, а уже скачает лишние ресурсы.

Чтобы решить ту проблему мы будем использовать вместо плеера крошечную встраиваемую страницу с превью видео и кнопкой. А при нажатии на нее будет загружаться плеер.

Хитрость будет заключаться атрибуте iframe — srcdoc в который мы поместим HTML нашего превью. 


HTML
<iframe
   
   
    src="https://www.youtube.com/embed/li_9PBrcOcQ"
    srcdoc="<style>*{padding:0;margin:0;overflow:hidden}
    html,body{height:100%}
    img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}
    span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}
    </style>
    <a href=https://www.youtube.com/embed/li_9PBrcOcQ?autoplay=1>
    <img src=https://img.youtube.com/vi/li_9PBrcOcQ/hqdefault.jpg alt='Demo video'>
    <span>▶</span>
    </a>"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    title="Demo video">
</iframe>

Создание сайта на HTML5 — создание html сайта