Как адаптировать видео с Youtube

Здравствуйте, уважаемые читатели XoZbloga! Когда говорят об адаптивной верстке, то подразумевают шаблон, который подстраивается под любое разрешение экрана. Элементам контейнерам div присваивается относительная ширина, правильное позиционирование и тд. Но также не следует забывать о содержимом этих контейнеров.

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

Адаптивные изображения

Вот простые правила CSS, для адаптации изображений на веб-странице.

img {
max-width : 100% ;

/* на всякий случай, чтобы сохранить пропорции */
height : auto !important ;

Как настроить YouTube под себя? Как адаптировать рекомендованный контент?

}

И если вы все еще заботитесь о корректности отображения в IE7 (хотя даже гугл уже официально отказался от поддержки браузеров IE по 8 версию), чтобы изображение не выглядело ужасным на маленьком экране, вот фитча:

img {
-ms-interpolation-mode : bicubic ;
}

Адаптивное видео

Если вы пользуетесь HTML5 , то ситуация с адаптацией аналогична изображениям:

video {
max-width : 100% ;

/* на всякий случай, чтобы сохранить пропорции */
height : auto !important ;
}

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

Таким образом надо решить проблему адаптации под размеры страницы. Для этого «обернем» HTML-код для вставки видео в два блока div :

и используем вот такие правила для этих блоков и тега :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#containingBlock {
width : 70% ;
}
.videoWrapper {
position : relative ;
padding-bottom : 56.25% ;
padding-top : 25px ;
height : 0 ;
}
.videoWrapper iframe {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
}

Ширину блока (с id containingBlock ) можно установить какую угодно (только в процентах). Другой блок (с классом videoWrapper ) позиционировать относительно, а плавающий фрейм ( iframe ) абсолютно. Это сделано для того, чтобы определять координаты iframe от границ родительского элемента (блока div videoWrapper ).
Отступ сверху в 25px — это место для панельки управления видео. Отступ снизу в 56,25% — это чтобы создать соотношением сторон видео 16:9, мы должны разделить 9 на 16 (0,5625 или 56,25%). Ну и ширина и высота самого фрейма в 100%. Автор данного решения.

ПРОДВИЖЕНИЕ ВИДЕО В YOUTUBE 🔥 УНИВЕРСАЛЬНЫЕ СПОСОБЫ

Плагин FitVids.js

Если вы используете JQuery, и хотите автоматизировать описанное выше решение, я предлагаю вам попробовать FitVids.js. Этот небольшой плагин написанный на JQuery использует тот же способ, что мы рассмотрели выше но без вашего вмешательства. Все что нужно, подключить его и соответственно библиотеку JQuery. На мой взгляд это проще и удобней!

Как адаптировать видео в YouTube для Facebook

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

Yt2fb.com буквально за несколько секунд поможет вам обработать ссылку таким образом, что в результате аудитория увидит сразу большую картинку видео, без описаний.

При желании пользователь может перейти на ваш YouTube-аккаунт, а может просмотреть видео непосредственно в Facebook.

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

Если нет – видео будет обработано с имеющимися настройками.

Источник: newreporter.org

Как сделать адаптивным видео на сайте или выпуск «Вопрос-ответ» №26

Всем привет! Большое количество городов охватил летний зной. Жара притупляет активность мозга и желание что-то делать. Здесь есть 2 варианта. Первый — отправиться на отдых и дать остыть голове и телу.

Второй — преодолеть лень, собраться с силами и продолжить работу. Хочу, чтобы все последовали первому варианту, но предложу второй =) — 26-й выпуск рубрики «Вопрос-ответ».

Особенностью сегодняшнего поста является то, что практически все вопросы задал один человек. Забавно то, что бОльшая часть из них еще не разбиралась в этой категории. Выбирайте понравившийся пункт, кликайте на него мышкой и попадете на его ответ.

1. Стоит ли разбавлять внутренний анкор-лист?
2. Рекомендованный контент от Google или тизерная система — что выбрать?
3. Может ли одинаковый дизайн стать причиной аффилиат-фильтра?
4. Хочу перевести на английский некоторые свои статьи. Как это лучше сделать?
5. Какой поиск лучше: стандартный от CMS или от поисковой системы?
6. Как на сайте адаптировать видео-ролики с youtube?
7. Нужно ли создавать sitemap для изображений?
8. Какой анкор и URL присваивать ссылке для скрипта при копировании?
9. Обязательно ли ставить блок «Похожие записи»?
10. Хватает ли одного сервиса статистики или нужно использовать несколько?
11. Где на странице расположить социальные кнопки?
12. Как закрыть существующие внешние ссылки?

1. Стоит ли делать ссылки такого рода: «тут, здесь» и тому подобное? Или лучше от них полностью избавиться, чтобы описывалось что по линку? Или все-таки разбавлять внутренний анкор-лист?

Важно использовать разнообразную не только внешнюю, но и внутреннюю ссылочную массу. Если на одни и те же страницы ссылаться одинаковыми линками (да еще и с «коммерческими» анкорами), то такие ссылки могут вызвать вопросы у поисковых алгоритмов. Где-то сослались прямым ключом, где-то — разбавленным, где-то — «тут» и так далее.

1. Ты пользовался ими, есть ли статистика дохода CTR?
2. Что лучше: ставить тизеры от гугла или стороннюю тизерную партнерку?
3. На сайте стоит 3 рекламы от google adsense. Если к ним добавить тизерку, адсенс не забанит за это? По сути, получится 3 рекламы от гугла + тизеры.

1. «Тизеры» (рекламные блоки в рекомендованном контенте) от google adsense находятся на начальной стадии. На 100% я их не тестировал, но пока сравнивать их с настоящими тизерами точно не стоит. Они проиграют обычным тизерным системам по кликабельности и доходу.
2. Лучше остановиться на классических тизерках.
3. Адсенс не забанит. Здесь больше нужно смотреть на взаимосвязь с поисковыми системами. Лучше не использовать тизеры с шок-рекламой, блоками для взрослых и так далее.

3. У меня 3 сайта (разные тематики) на одном хостинге и IP-адресе. Планирую поставить на всех одинаковый шаблон, но разное цветовое оформление. Не будут ли они считаться аффилиатами?

Аффилиат-фильтр был создан с целью удаления из поисковой выдачи сайтов одной и той же компании. Некоторые предприимчивые владельцы онлайн-бизнесов и их продвиженцы создавали по несколько копий основного проекта. Цель — занять как можно больше строчек в ТОПе. Яндекс посчитал, что такое продвижение сайта не совсем честным и создал аффилиат-фильтр. После его внедрения по одному запросу в выдаче мог участвовать только один ресурс компании.

Раз тематики у проектов разные, то и запросы, по которым они будут находиться — разные. В силу этого аффилиат-фильтр не возможен. Шаблоны и один ip-адрес здесь не при чем.

4. Есть задумка — перевести некоторые свои статьи на английский. Как это лучше реализовать — отдельная подпапка и в ней переведенный шаблон + те статьи, которые будут на английском?

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

5. Какой поиск на сайт лучше: встроенный или от поисковых систем?

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

6. У меня стоит wordpress. На нем адаптивная тема. Создавая статьи и вставляя в них видео с youtube, я руководствовался шириной контентной части со своего ноутбука. Ролики получались в ширину порядка 600 пикселей.

Недавно зашел на проект с мобильника и увидел, что видео не помещаются по ширине экрана. Смотрится не очень. Может быть, знаете, как сделать адаптивным не только шаблон, но и видео-ролики?

Мобильные версии и адаптивность стремительно развиваются. Если адаптировать изображения и текст — это само собой разумеющееся, то про видео часто забывают. Для сайтов на wordpress существует один несложный в настройке плагин — FitVids for WordPress. Он адаптирует видео под ширину контентной части независимо от устройства.

Один нюанс. Если у вас широкая колонка для основного контента, ролик будет растягиваться во всю ее ширину.

7. Как считаешь, стоит ли заморачиваться с созданием сайтмапа для изображений?

На самом деле, первый раз встречаюсь с выражением «сайтмап для изображений». Если они не закрыты от индексации и размещены на нормальных страницах, к которым может попасть поисковый робот, то такая карта не нужна — паук их и так найдет и проиндексирует.

8. Существует скрипт, который при копировании добавляет ссылку на сайт. Какой лучше анкор там делать: чисто url главной страницы, но сам линк ведет на статью, или анкор и урл совпадают.

Недавно видел следующий хак. Если человек копирует статью и добавляет себе на ресурс, то идет невидимая ссылка.

Она делается как-то с помощью display:none, чтобы была невидима для копипастеров. Как ты думаешь, не будут ли такие линки плохо отражаться на моем проекте? И что делать, если контент воруют в основном ГС?

В качестве анкора и URL, на мой взгляд, лучше использовать просто URL статьи (так сделано у этого проекта из Зелени — что-то я подзабыл данную серию постов ). Данный момент относится к внешним факторам. Как известно, их контролировать труднее, чем внутренние. Если поставить какой-то определенный анкор или одну и ту же страницу, то может быть переспам текстом линка или неравномерное ссылочное распределение веса по площадке.

«Невидимками» я лучше бы пренебрег. Это относится к запрещенным видам продвижения. Когда ГС копирует контент, то, скорее всего, он делает это автоматически. В таком случае, ссылка вряд ли попадает в копированный кусок, так как при этом участвуют скрипты, которые, как правило, игнорируются парсерами. В других случаях могут пригодиться советы из поста «Как обезопасить контент от копирования?».

9. Достаточно ли внутренней контентной перелинковки или все же добавить рекомендуемый блок типа «Статьи по теме»? Где лучше вставить в конце статьи или под формой ввода комментариев?

По моему опыту, наличие или отсутствие обычного блока «Похожие статьи» (просто ссылки) не сильно влияют на количество просматриваемых страниц посетителями, а также на ранжирование поисковыми системами.

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

10. Лучше использовать Яндекс.Метрику и Google Analytics вместе? Или достаточно чего-то одного, что лучше? Я вот пока пользуюсь только Метрикой. Может, стоит прикрутить гугл на всякий случай — пусть собирает данные?

Может, когда пригодится.

Я обычно ставлю на сайт 2 сервиса статистики. При каких-то спорных ситуациях всегда можно сверить результаты.

11. Социальные кнопки вверху/внизу статьи, или и там и там? Есть ли эксперименты, где лучше работают?

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

1. Присвоить всем внешним линкам атрибут nofollow.
2. Использовать скрипт, который после загрузки страницы, накладывает на определенные слова ссылку.

• если использовать скрытие ссылок, то придется отредактировать все статьи на сайте.
• В случае, если метод скрытия перестанет работать (поисковики научатся определять, я думаю, рано или поздно) придется снова все редактировать.

Высокий уровень спамности может сложиться из-за большого количества комментариев с линками в именах авторов. Даже, если у них есть атрибут nofollow, как правило, они считаются подобными сервисами.

Необходимо выбрать автоматический способ. Самым простым будет добавление ко всем исходящим ссылкам rel=»nofollow». Про такую конструкцию говорят и сами поисковики.

Если пойти дальше, то можно сделать все внешние ссылки через редирект. Редирект не простой, а через страницу-прокладку. Внешние линки могут выглядеть как внутренние https://sosnovskij.ru/go/yandex.ru. По клику пользователь переходит на внутреннюю страницу-прокладку. С нее он сразу или через некоторое время автоматически перебрасывается на конечный URL.

Так, например, реализовано на Masterwebs.ru (вторая ссылка в подписи). Стоит не забыть закрыть от индексации URL скриптов, отвечающих за это и прокладку.

На сегодня все! Жду ваши комментарии, отзывы и новые вопросы на почту .

Источник: sosnovskij.ru