От WordPress 3.0+ можете лесно да вградите видеоклипа в YouTube в статиите си, просто като поставите URL адреса на видео сайта в текстовия редактор. WordPress ще работи след това и ще вмъкне необходимия код, за да вгради видеоклипа на вашия сайт. Всичко това е страхотно, освен че ширината и височината на вграденото видео е предварително и не можете да го промените. Това, което може да се случи е, че или видеоклипът е твърде малък за вашата тема, или е твърде голям, за да се побере в съдържателната област. Ако използвате отзивчива тема за сайта си, ще откриете, че видеоклипът не се мащабира, докато преоразмерявате браузъра и в крайна сметка нарушава темата.

За да илюстрираме, това се случи:

Забележете, че видеоклипът не заема пълната ширина на контейнера за съдържание?

Забележете, че видеоклипът не се мащабира при преоразмеряване на браузъра и излиза извън контейнера за съдържание и прекъсва темата?

За да поправим това, трябва да използваме скрипт - FitVids -, който ще превърне вградения ви видео в обект, който отговаря на пълна ширина, и ще се мащабира автоматично при преоразмеряване на браузъра.

Лично аз интегрирах скрипта FitVids директно в темата, за да намаля сървъра, но за тези, които нямат опит в кодирането, има плъгин, който може да го направи за вас: FitVids за WordPress.

1. Инсталирайте и активирайте приставката FitVids за WordPress.

2. Отидете на "Appearance -> FitVids".

3. Ако сте абсолютно сигурни, че jQuery скриптът (версия 1.6 и по-нова) вече е включен в темата, оставете полето "Добавяне на jQuery" празно. Ако не, поставете отметка в квадратчето до "Добавяне на jQuery".

4. Полето "jQuery selector" е малко трудно, защото може да е различно за всеки сайт. В повечето случаи можете просто да въведете думата " тяло " (без котировката) в полето за въвеждане и тя трябва да работи. Ако обаче искате да насочвате конкретно контейнер с видеоклип, можете да поставите идентификационния номер / класа на контейнера в това поле, например: " #video-container ", " #content ", " .entry-content " и т.н.

Забележка : "#" и "." Пред текста представляват съответно "id" и "class" в CSS.

5. Сега разгледайте публикацията с вграден видеоклип. Трябва да видите нещо подобно:

Видеото сега заема цялата широчина на контейнера за съдържание

Той автоматично се мащабира при преоразмеряване на браузъра.

заключение

FitVids е лесен за използване скрипт за преобразуване на вградения ви видео в отзивчив обект. Изпробвайте я и ни уведомете, ако това е полезно за вас.