Привіт, друзі! Всі ми знаємо, що пошукові системи оцінюють мобільність теми сайту. У Мережі вже валом адаптивних тим для всіх типів CMS. Але виявляється сама по собі адаптивність теми не вирішує всіх проблем. Вона звичайно адаптує контент, але на жаль іноді під виняток потрапляє відео, що вставляється з Youtube. Однак буквально кілька рядків коду допоможуть вийти переможцем з цієї ситуації.

Трохи передісторії. Тема мого сайту адаптивна. Причому перевірено це не на словах її автора, а шляхом практичного перегляду на різних девайсах. І до певного часу все було нормально, поки в Яндекс вебмайстрів не з'явилося повідомлення про те, що мій веб-сайт не оптимізований для мобільних пристроїв. І це при тому, що штатна перевірка в тому ж вебмайстрів давала відмінні результати.

Скажу чесно, я довго не міг зрозуміти такої оцінки. Але потім почав пригадувати, всі свої дії і зрозумів, що собака зарита в сторінках, на яких я розміщую свої відеоролики. Адже все було здорово до тих пір, поки я не став серйозно захоплюватися своїм відеоканалом на Youtube. Приблизно з середини минулого літа я став записувати відео до своїх статей і природно вставляю їх до себе на сайт. Благо, це зовсім нескладно.

Зазвичай вставляють відео через шорткоди самого WordPress (додати мультимедійні дані зі стороннього сайту)

або шляхом копіювання і вставки запису фрейму, яку формує Ютуб через поділитися і вибір режиму HTML-код.

І в принципі все це правильно. Але біда в тому, що при всіх способах використовуються фрейми, яким задається ширина і висота. Інакше просто не буде самого фрейму. І ось в цьому випадку виходить, що при всій адаптивності теми при дозволах екрану гаджета користувача менших, ніж заявлена ​​в параметрах відеофрейма ширина, цей самий кадр вже починає вилазити за кордон сторінки. Виглядає це ось так:

Ви самі прекрасно бачите суть проблеми неозброєним поглядом. Як кажуть в таких випадках: без коментарів! При цьому варто відзначити, що горизонтальний скрол на екрані не виникає. Саме з цієї причини Яндекс і надіслав своє повідомлення.

Звичайно я пізно кинувся - поки на небі зійшлися зірки, які звели мене з вирішенням проблеми і наявністю часу на його реалізацію. І цим рішенням, я зараз поділюся з Вами.

За великим рахунком все одно, яку Ви посилання будете вставляти і як. Важливо зробити висновок її в контейнер, щоб вийшла ось така конструкція:

<div> посилання на відео </ div>

Але звичайно саме по собі приміщення в контейнер не дасть нічого, якщо не прописати стилі у файлі CSS теми:

Після цього залишиться просто посилатися на зазначені стилі при вставці відео. Для цього в режимі редактора «Текст» до того самого блоку <div>, про який я писав вище, потрібно додати клас стилів і все автоматом встане на місця:

<div class = "video-responsive"> посилання на відео </ div>

На прикладі вставки відео через штатний ютубовскій фрейм Ваша запис буде виглядати приблизно таким чином:

Іншими словами потрібно прописати властивості самого блоку div, а він вже все зробить сам. Причому таке рішення багато корисніше застосування спеціальних плагінів з точки зору швидкості Вашого сайту.

За рахунок додавання такого запису вже буде без різниці, як Ви вставляєте своє відео - воно прекрасно буде адаптуватися.

Думаю, що дана стаття в нагоді багатьом блогерам. Свого часу цю тему активно обговорювали в Інтернеті. Я їх переглянув багато. Вибрав найоптимальнішу «формулу» стилів. Додатково б порадив замінити зазначені явно параметри фрейма по висоті і ширині (в вищенаведеному коді - це width = "560" height = "315") на такі: width = "auto" height = "auto". Це дозволить кадру може використати усю вільну ширину і звільнить Вас від необхідності центрування.

Ось власне і весь секрет адаптованого відео. Якщо залишилося щось незрозумілим, пишіть. Але у всякому разі рекомендую перевірити свої сторінки з відеоконтентом на адаптивність за допомогою браузера. Як це зробити дивіться в статті Як правильно перевірити сайт на мобільність за допомогою браузера . І якщо відео на Вашому сайті вилазить за край, то просто скопіюйте стилі зі статті і додайте до себе на сайт в файл CSS стилів. А вже безпосередньо в статті обертайте необхідне посилання тегами.

З повагою, Сергій Почечуев

СПОДОБАЛАСЯ СТАТТЯ? Розкажи ДРУЗЬЯМ!