YouTube: валидатор ругается на атрибут allowfullscreen

@MorfiuS · Регистрация: 16.10.2009

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Я недавно в HTML и хочу разобраться в некоторых нюансах, так что отнеситесь с пониманием!
У меня возник вопрос, как вставить ролик YouTube на свой сайт так что бы он проходил валидацию?
На YouTube был сгенерирован код:

HTML5
1
<iframe width="640" height="360" src="http://www.youtube.com/embed/O5SlyvKHe9A" frameborder="1" allowfullscreen> </iframe>

При валидации сайта, валидатор ругается на атрибут allowfullscreen! Обьясните почему?
Можно ли как то это исправить???
Видел где то что используют <object> вместо<iframe> но я не очень хорошо разбираюсь в этих тегах, объясните, пожалуйста, какая между ними разница и какой лучше использовать для вставки видео с YouTube. Где то читал что <object> медленнее, правда ли это. Хотелось бы <iframe>, думаю не зря его YouTube предлагает (или зря??).

С нетерпением жду Ваших ответов!

@Songo · 25.01.2013, 01:08

Сообщение от MorfiuS

как вставить ролик YouTube на свой сайт так что бы он проходил валидацию?

Да легко

HTML5
1
<iframe width="640" height="360" src="http://www.youtube.com/embed/O5SlyvKHe9A" style="border: 0"></iframe>

Border стоит 0, не понимаю зачем вам 1

@newJS · 25.01.2013, 07:33

как вариант, валидатор ругается на <iframe> потому что этот тег не рекомендуется использовать с некоторыми доктайпами

@MorfiuS · 25.01.2013, 19:13 **[ТС]**

Сообщение от newJS

как вариант, валидатор ругается на <iframe> потому что этот тег не рекомендуется использовать с некоторыми доктайпами

Использую следующий DOCTYPE:

HTML5
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Проблема скорей всего не с тегом <iframe> а с атрибутом allowfullscreen.
За что он отвечает и обязательно ли его использовать?

Добавлено через 3 минуты

Сообщение от Songo

Да легко

HTML5
1
<iframe width="640" height="360" src="http://www.youtube.com/embed/O5SlyvKHe9A" style="border: 0"></iframe>

Border стоит 0, не понимаю зачем вам 1

Атрибут border 0 или 1 не принципиально.
Хотелось бы знать как быть с атрибутом allowfullscreen?
И что лучше <iframe> или <object>?

@Songo · 25.01.2013, 20:06

Сообщение от MorfiuS

Хотелось бы знать как быть с атрибутом allowfullscreen?

Этот атрибут придумал себе youtube, в <iframe> нет такого атрибута. Вроде как говорит о том, что видео можно развернуть на весь экран. Его можно просто выкинуть и забыть, так как проверял во всех браузерах в IE6 в том числе, и всё отлично работает.

Сообщение от MorfiuS

И что лучше <iframe> или <object>?

youtube рекомендует <iframe>, меньше кода и позволяет показывать видео в HTML5 при отсутствии flash. С <object> то-же есть свои заморочки в плане валидации.

frameborder по спецификации HTML5 то-же не пройдет валидность, предложит воспользоваться CSS, так как frameborder уже устарел. Поэтому я написал style="border: 0"

Для видео YouTube доступно два стиля кодов встраивания. Новый код встраивания начинается с текста "<iframe..." и поддерживает как Flash, так и видео HTML5. Код встраивания в старом стиле начинается с текста "<object..." и поддерживает только видео Flash.

Некоторые службы поддерживают только старый код встраивания "<object...". Если код встраивания "<iframe..." был отвергнут сайтом, в качестве временного решения рекомендуется использовать старый код "<object...".

Источник

@alpex · 28.01.2013, 08:24

HTML5
1
... allowfullscreen="allowfullscreen" ...

@MorfiuS · 28.01.2013, 18:03 **[ТС]**

Сообщение от alpex

HTML5
1
... allowfullscreen="allowfullscreen" ...

При использовании данного синтаксиса страница так же не проходит валидацию, пишет что даный атрибут не допустим для тега <iframe>

Добавлено через 18 минут
При удалении этого атрибута видео нельзя развернуть на весь экран Firefox! В IE и Chrome у меня этот атрибут игнорируется и видео можно развернуть независимо от того есть он или нет, а в Firefox 18.0.1 если его убрать то с плеера пропадает кнопка развернуть.

Пример моего тестового кода:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Видео</title>
</head>
<body>
 
<p>Видео с YouTube!</p>
<iframe width="640" height="360" src="http://www.youtube.com/embed/O5SlyvKHe9A" frameborder="1" allowfullscreen> </iframe>
 
<p>Тест</p>
<iframe width="640" height="360" src="http://www.youtube.com/embed/O5SlyvKHe9A" style="border: 0"></iframe>
 
</body>
</html>

@Songo · 03.02.2013, 11:57

Сообщение от MorfiuS

При удалении этого атрибута видео нельзя развернуть на весь экран Firefox!

У меня всё Ок, и в 18 и в 18.0.1 всё отлично работает.

@Songo · 03.02.2013, 12:07

MorfiuS
Всё доступно, всё разворачивается v18.0.1.

@MorfiuS · 03.02.2013, 23:54 **[ТС]**

Разобрался в чем дело! Может кому то понадобится.

В YouTube сейчас тестируется HTML5 видео (там вроде как видео воспроизводится без Flash-плеера), и они как то выборочно подключают пользователей у которых подходит ПО на этот тест. Правда не пойму как проходит инициализация пользователя, так как я не входил в свой аккаунт на YouTube, скорей всего по cookies. Вообщем я попал в это число счастливчиков - подопытных кроликов)

Так вот в режиме HTML5 параметр allowfulscreen имеет значение и при его удалении видео нельзя развернуть на весь экран. А в обычном Flash-режиме его можно удалить так как он не играет никакой роли и из-за него сайт не проходит валидацию.

Решение проблемы в моём случае обошлось походом на сайт YouTube, в самом низу страницы есть пункт "Новые функции", раздел "Видео HTML5", "Выйти из режима тестирования HTML5". Если кому то интересно, можете поэкспериментировать

Спасибо всем кто откликнулся и пытался помочь в решении вопроса

@Songo · 04.02.2013, 03:01

Сообщение от MorfiuS

Так вот в режиме HTML5 параметр allowfulscreen имеет значение

Проверил, действительно так.

А юзеров отбирают думаю очень легко, стоит flash, значит через его, а если отключен или нет его - значит HTML5. У меня по крайне мере так.

Сообщение от MorfiuS

Спасибо всем кто откликнулся и пытался помочь в решении вопроса

И вам спасибо, что отписались.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	25.01.2013, 07:33
	как вариант, валидатор ругается на <iframe> потому что этот тег не рекомендуется использовать с некоторыми доктайпами 0

@Songo 10 / 6 / 0 Регистрация: 25.01.2013 Сообщений: 46
	03.02.2013, 12:07
	MorfiuS Всё доступно, всё разворачивается v18.0.1. Миниатюры 0

@MorfiuS 1 / 1 / 0 Регистрация: 16.10.2009 Сообщений: 20
	03.02.2013, 23:54 [ТС]
	Разобрался в чем дело! Может кому то понадобится. В YouTube сейчас тестируется HTML5 видео (там вроде как видео воспроизводится без Flash-плеера), и они как то выборочно подключают пользователей у которых подходит ПО на этот тест. Правда не пойму как проходит инициализация пользователя, так как я не входил в свой аккаунт на YouTube, скорей всего по cookies. Вообщем я попал в это число счастливчиков - подопытных кроликов) Так вот в режиме HTML5 параметр allowfulscreen имеет значение и при его удалении видео нельзя развернуть на весь экран. А в обычном Flash-режиме его можно удалить так как он не играет никакой роли и из-за него сайт не проходит валидацию. Решение проблемы в моём случае обошлось походом на сайт YouTube, в самом низу страницы есть пункт "Новые функции", раздел "Видео HTML5", "Выйти из режима тестирования HTML5". Если кому то интересно, можете поэкспериментировать Спасибо всем кто откликнулся и пытался помочь в решении вопроса 1