logo frelancera
Фриланс доступен всем
Главная » Блог фрилансера » Красивая рамка для вставки видео на WordPress

Красивая рамка для вставки видео на WordPress

Увидел я не так давно на одном сайте примерно вот такую картинку с вставленным прямо в нее видео роликом и подумал, а как бы такое сделать у себя? Поискал в Интернете, но подходящего под WordPress решения так и не нашел. Да, собственно говоря, мне и не очень хотелось, так как считаю, что для фрилансера более подходит вариант самообучения, и поэтому...

«Ну что же, — подумал я, — придется постараться сделать самому». И после нескольких проб и ошибок на моем тестовом блоге, а теперь и перед вами, наконец-то появилась вот такая картинка с видео роликом внутри:

Не правда ли интересно и оригинально? А вы хотите сделать себе на сайт или блог подобную? Наверно не отказались бы, по крайней мере некоторые из вас? Тогда давайте разберем все подробнее.

Начнем с того, что табличная верстка на WordPress (в моем случае) не работает. Хотя, для более опытного верстальщика наверно это было бы возможно, но я буду описывать свой метод.

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

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

Кстати, для тех не знает, узнать максимально допустимую ширину встраиваемой картинки можно заглянув в таблицу стилей вашего шаблона через вкладку «редактор». Как правило, за контейнер страницы или поста отвечает класс «content», но в разных шаблонах бывают и другие варианты. Но, даже если вы совершенно не разбираетесь в CSS, то не отчаивайтесь, подобрать нужную ширину вы сможете и опытным путем, чуть ниже я затрону этот момент.

Теперь нам надо связаться с нашим хостингом, точнее вашим, для этого каждый использует свой вариант, поэтому я не стану описывать этот момент, а лишь укажу что картинку необходимо загрузить в папку images (в некоторых случаях она может называться image), которая находиться внутри папки с шаблоном (темой).

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

Далее, давайте перейдем к следующему этапу и добавим в таблицу стилей нашего шаблона следующий класс:

#ramka {border:none;background: url(images/photomy.jpg) no-repeat; width: 600px; height: 450px; text-align: left; margin-bottom: -200px; padding: 255px 0 0 160px;}

Лучше, если вы вставите его в самый конец таблицы стилей, так вам будет легче его искать и вносить поправки.

Поясняю:

класс #ramka мной взят просто так (придуман) и может быть заменен собственным, но я бы не рекомендовал вам этого делать, особенно если вы не особо разбираетесь в таких вещах.

  • (images/photomy.jpg) — отвечает за место хранения и вывод картинки, название подготовленной вами картинки может быть другим, поэтому его необходимо заменить (не забудьте про расширение jpg, png, gif);
  • width: 600px; — ширина картинки. Здесь вам необходимо указать свою или корректировать ее значение опытным путем;
  • height: 450px; — высота картинки, которую вы также можете подгонять под собственные требования;
  • padding: 255px 0 0 160px; — место вывода видео, где 255px — отступ сверху, 0 0 — справа и снизу (можно задавать собственные значения с указанием px, и 160px — отступ слева;
  • margin-bottom: -200px; — отступ текста снизу блока (в каждом отдельном случае может быть разным или ненужным вообще, все зависит от шаблона).

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

Далее нам потребуется еще один код, который мы сможем использовать как шаблон и вставлять уже непосредственно в записи или на страницы сайта/блога:

<div id="ramka"><здесь прописываем код вставки видео></div>

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

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

Удачи вам и вашем интернет-детищам! До скорой встречи, друзья, и не забывайте подписаться на обновления, а также рассказать своим друзьям о том что вы узнали из этой статьи, ведь им тоже может понадобиться такое предложение.

Блог фрилансера

Присоединяйтесь к дискуссии! Отзывов уже: 12..

  • Ты просто супер молодец!
    Надежда Орехова

    Ну, Серега, удружил так удружил!!! Я тут 2 дня билась, изобрела рамку, встроила видео, а что дальше делать — понятия не имею. Думала, что всю эту конструкцию надо было каждый раз ручками вводить. Все, жди теперь нижайшей просьбы все это облагородить и сделать изящно и красиво :)

    Ответить
  • User Ты здесь совсем как дома!
    Сергей

    Всегда пожалуйста, мне для друзей ничего не жалко :arrow:

    Ответить
  • Не частый гость
    gigaz.ru

    Все это можно сделать очень легко по средствам HTML можно не задействовать css

    Ответить
    • User Ты здесь совсем как дома!
      Сергей

      Сделать конечно можно, но не каждому дано, да и шаблоны порой сюрпризы подкидывают :)

      Ответить
  • Уже отзывчивый!
    Нина

    Сергей, все сделала поэтапно как вы тут написали, но рамки моей почему то на видео нету... может быть из за одного момента, который я непоняла, это как делать отступы снизу и сверху статьи — padding: 255px 0 0 160px; Как х вообще подсчитывать? Я оставила как у вас, но она не отображается(

    Ответить
    • User Ты здесь совсем как дома!
      Сергей

      Вполне вероятно, что отступы и вовсе не нужны, это надо смотреть уже после появления рамки-картинки и отражения в ней видио ролика. Если видео есть, а картинки под ним нет, то скорее всего необходимо проверить правильность прописанного пути к картинке (images/photomy.jpg). Вполне возможно, что необходимо указать полный путь, а не относительный.

      Ответить
      • Уже отзывчивый!
        Нина

        Сергей у меня вот как: #ramka {border:none;background: url (img/ramka2.jpg) no-repeat; width: 470px; height: 357px; text-align: left; margin-bottom: -200px; padding: 255px 0 0 160px;}

        Ответить
        • User Ты здесь совсем как дома!
          Сергей

          Попробуйте прописать полный путь к картинке вместо (img/ramka2.jpg) — www.blog-travuscka.ru/wp- ...a/img/ramka2.jpg

          Ответить
          • Уже отзывчивый!
            Нина

            Да все уже перепробовала, ничего непомогает(

            Ответить
          • User Ты здесь совсем как дома!
            Сергей

            Специально для Вас, Нина — попробуйте вот такой вариант для вставки прямо в запись (через HTML-редактор):

            <div style="background-image: url('полный путь к картинке'); width: 600px; height: 450px; margin: 0px 0px -100px 20px; padding: 117px 0px 0px 30px; background-position: initial initial; background-repeat: no-repeat no-repeat;"><iframe src="полный путь к видео" frameborder="0" width="540" height="310"></iframe></div>

            Ответить
  • Не частый гость
    Интман

    Что вы порекомендуете для картинок рамки? Есть ли какойнибудь каталог?

    Ответить
    • User Ты здесь совсем как дома!
      Сергей Трутнев

      Здравствуйте! Как правило, при заказе рамки человек просит учесть тематику. Как вариант, можно подобрать фотографию или подходящую картинку. Каталогов я не искал никогда, но это можно спросить у Google или у Яндекса, например, по запросу «Картинки для рамок» или «Фоны для рамок».

      Ответить

Ваш email не будет опубликован. Обязательные поля отмечены *
Никнейм *
Email *
Сайт
Ваш комментарий
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: