У цій статті ми поговоримо про те, як вставити відео на сайті навчимося:

1. Розміщувати свої файли на відео хостингах та відображати їх на сайті.
2. Завантажувати відео на свій хостинг та відображати їх на сайті за допомогою програвача.

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

Як завантажити відео на Youtube:

1. Насамперед Вам необхідно увійти до свого облікового запису YouTube.
2. Натисніть кнопку Добавити відеоу верхній частині сторінки.
3. Виберіть ролик для завантаження. (Враховуйте, що відео не повинно порушувати авторські права. Якщо Ви хочете накласти на відео відому музику, доведеться її купити).
4. Поки файл завантажується, заповніть основну інформацію про ролик і при необхідності додаткові параметри.
5. Щоб додати відео на YouTube, натисніть Опублікувати.
6. Поки ви не натиснете кнопку Опублікувати, відео доступне лише вам.

З більш докладною інструкцієюіз завантаження відео на Youtube можете ознайомитись на сторінці supporta

Вставити на сайт відео з Youtube:

Щоб вставити вже завантажене (є) на Youtube відео:

Ми розглянули кілька способів вставки коду з відео, які вже завантажені на один з популярних відео хостингів.

Тепер розглянемо варіанти відтворення відео із завантаженим відео на свій сервер.

Вставити відео на сайт за допомогою HTML5

Для цього способу Вам знадобиться тег

<video> <sourcesrc= "URL"> video>

< span class = "tag" ><< span class = "title" >video< / span >& gt;< / span > < span class = "tag" ><< span class = "title" >source< / span > < span class = "attribute" >src =< span class = "value" >"URL"< / span > < / span >& gt;< / span > < span class = "tag" >< /< span class = "title" >video< / span >& gt;< / span >

1. Завантажуємо на сервер відео;
2. Копіюємо вищевказаний код;
3. Вставляємо у потрібну нам частину сайту скопійований код;
4. Змінюємо URL на шлях до файлу, який ми розмістили на хостингу
5. Зберігаємо зміни та оновлюємо сторінку.

Для тега video існує кілька атрибутів, так само деякі з них зустрічаються в кодах, які пропонують популярні відео хостинги.

Насамперед хотілося б сказати про такі атрибути як height (висота), width (ширина).

За допомогою їх можна налаштувати висоту та ширину області для відтворення відео.

• src- Це найважливіший атрибут, він вказує шлях до відео.
• autoplay— Відтворення відео після завантаження сторінки.
• loop— повтор відтворення відео після завершення
• poster— Вказує адресу зображення, яка відображатиметься, поки відео не доступне або не відтворюється.
• preload— Завантажити відео разом із завантаженням веб-сторінки.

Вставити відео на сайт за допомогою плеєра

Зараз в інтернеті є безліч різних плеєрів, які ви можете використовувати на своєму сайті. Як приклад я вибрав один із популярних flowplayer.

1. а потім його розархівуйте;
2. Створіть папку та помістіть у неї файли з архіву;
3. Підключіть javascript-файл програвача до html-файлу. Для цього всередині тега head, пропишіть наступний код:
   
   
   Будьте уважніше, прописуючи шлях до файлу. Ви можете не створювати папку, а покласти файл скрипта в будь-яку іншу папку, наприклад, у папку з іншими скриптами.
4. Тепер розмістимо сам плеєр у коді сторінки та відповідно відео файл.
   

   < ! -- the player -- > < div data - swf = "flowplayer.swf" data - ratio = "0.4167" > < video > < source type = "video/webm" src = "https://шлях до вашого відео файлу якщо він у форматі.webm"> < source type = "video/mp4" src = "https://шлях до вашого відео файлу якщо він у форматі.mp4"> < / video >

Я вже писав про те, як вставити свою музику в . Пропоную розглянути не менш актуальне питання – як вставити свою музику в мафію 3. До речі, всі три частини гри mafia відрізняються лише сюжетом та додатковими персонажами. А загалом ігри дуже схожі. Тому, як і в другій частині, вам потрібно завантажити спеціальну програму-доповнення. З її допомогою ви можете створити своє радіо, тобто зробити свій плейлист із піснями.

Програма є абсолютно безкоштовною. Можна скачати без реєстрації та смс. Установка займає трохи більше 5-ти хвилин. Важливо: після інсталяції програма може “запросити” перезавантаження комп'ютера. Не панікуйте, це нормально! Отже, як вставити свою музику в мафію 3: моди для mafia 2, maifa 1 та 3.

Як вставити свою музику в мафію.

Для того, щоб створити своє радіо у третій версії мафії, вам потрібно завантажити програму Mafia 2 Music Manager 1.3.Одна з важливих функцій проги: пісні можна слухати не тільки в процесі гри, але й просто запустивши програму. До речі, всі ваші плейлисти зберігаються. Тому знову оновлювати список не потрібно.

Можливо вам це знадобиться)

Сьогодні у зв'язку з оновленням WordPress змінився порядок редагування завантаженої фотографії. Загалом редагування спростилося. Порядок завантаження фото з комп'ютера залишився таким самим.

Для того щоб вставити фото на сайт або текст статті поставте для початку курсор в те місце вашого тексту, куди ви хочете розмістити фотографію. Потім натисніть кнопку "Додати медіафайл". Вона знаходиться між Заголовком статті та консоллю редагування тексту (Див. рис 1)

(Див. рис 1)

У вікні «Вставити медіафайл», що відкрилося, натисніть посилання «Завантажити файли» (Див. рис 2)

(рис 2)

У наступному вікні натисніть кнопку «Виберіть файли» (див. мал. 3)

(Див. рис. 3)

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

Після цього натисніть кнопку «Відкрити», яка знаходиться в нижньому правому куті додаткового вікна(Див. рис. 4)

(Див. рис. 4)

Вибрана фотографія завантажиться на сайт і перебуватиме у вкладці «Медіафайли» і надалі за потреби може завантажуватися в інші статті сайту, повторно її завантажувати з комп'ютера вже не потрібно. В активні вікнаправоруч введіть необхідну інформацію (див. рис. 5):

— у «Заголовок» та «В атрибут alt»- Введіть назву вашої статті.

— в «Опис» — надрукуйте одним реченням про що ваша стаття. У тексті пропозиції має бути заголовок статті (див. рис. 5).

Потім натисніть кнопку «Вставити до сторінки». Якщо ви пишіть текст не в "Сторінку", а в "Запис", то у вас буде кнопка "Вставити в запис" - натисніть її.

(Рис. 5)

Фотографія з'явиться там куди ви перед цим поставили курсор. Спочатку фотографія завантажиться не в тому розмірі, який оптимально виглядатиме на станиці сайту (див. рис 6). Але це легко можна виправити.

(Рис. 6)

Щоб редагувати зображення, наведіть на нього курсор та натисніть лівою кнопкою миші 1 раз. Зображення покриється синім фоном,потім натисніть на зображення у верхньому лівому кутку (див. мал.7)

(Мал. 7)

Після натискання на іконку, як це показано на рис 7, ви потрапите в панель редагування фотографії (див. рис 8). Тут також необхідно ввести потрібну інформацію для покращення індексації завантаженої фотографії:

- у рядок «Заголовок» введіть заголовок вашої статті;

- у рядок "Атрибут alt" - також введіть заголовок вашої статті;

Потім виберіть розташування вашої картинки на сайті: «Ліворуч», «Дело», «По центру» або «Ні».

Після того, як введете всю необхідну інформацію, натисніть вкладку «Додатково» у верхньому рядку додаткового вікна»

(рис 8)

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

В активному квадратику "Відкривати в новій вкладці" поставте галочку. Якщо натиснути на фото безпосередньо на сайті, воно відкриється в новому вікні (див. мал. 9).

(рис 9)

Після того, як введете всю необхідну інформацію, натисніть кнопку «Оновити» в нижньому лівому куті додаткового вікна. Все, ваша фотографія вставлена ​​у текст. У редакторі це буде виглядати так (див. рис 10).Натисніть кнопку "Зберегти".Перед публікацієюклацніть вкладку «Подивитися» і погляньте, як стаття з фото виглядає на сайті. У разі потреби внесіть коригування за розмірами та перезбережіть сторінку. Потім натисніть кнопку "Опублікувати".

(рис 10)

Фото вставлено у статтю та коректно виглядає на сайті (див. рис 11)

(рис 11)

Якщо фотографію необхідно розмістити не посередині, а праворуч або ліворуч, (див. мал 12) то дійте наступним порядком.

(рис 12)

Клацніть на фотографію та увійдіть до панелі редагування. Тут оберіть «Вирівнювання» «Зліва» (див. рис 13)

(рис 13)

Заповніть всі необхідні дані аналогічним порядком та натисніть кнопку «Оновити» (див. рис 14)

(рис 14)

Після того як ви опублікуєте статтю, фото на сайті буде виглядати як показано на малюнку 15.

(рис 15)

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

Читайте статтю на цьому сайті

Бажаєте дізнатися, як можна «помінятися особами» з другом, родичем чи улюбленою знаменитістю? У цьому вам допоможе магія фотомонтажу! Як це працює? Пошуковики на запит, напевно, запропонують скористатися фотошопом, але непрофесіоналу ця програма не підійде. Оптимальний варіант - проста, на кшталт «Домашньої фотостудії». У цій статті ви дізнаєтесь, як у фотографію вставити іншу особу, не маючи досвіду у фотомонтажі.

Крок №1. Починаємо роботу

Для початку пропонуємо та встановити його на вашому ПК. Дотримуйтесь вказівок Майстра установки – програма буде готова до роботи буквально за хвилину. Запустіть утиліту. В стартовому вікнівиберіть опцію «Відкрити фотографію»і знайдіть файл із фото, яке ви хочете редагувати.

Ви зможете розпочати роботу відразу після того, як програма буде встановлена

Крок №2. Фотомонтаж

Наступний етап – найвідповідальніший. У головному меню натисніть вкладку «Оформлення»та знайдіть у списку . У вікні, що з'явилося, створіть новий шар. Для цього натисніть «Додати шар» > «Фотографію»та завантажте фото, яке хочете накласти.

За допомогою фотомонтажу ви зможете легко накласти одну фотографію на іншу

При виборі знімка, варто пам'ятати, що обидві фотографії мали приблизно однакову роздільну здатність і якість. Більше того, особи мають бути зняті з максимально схожого ракурсу.

У списку виберіть шар із доданим зображенням та натисніть "Обрізати фото". Автоматично з'явиться нове вікно. Скористайтеся довільною формою обрізки. Акуратно обведіть обличчя по контуру, намагаючись уникати зайвих об'єктів, як аксесуари. Якщо вийшло нерівно, скористайтесь опцією "Скинути виділення"і спробуйте ще раз. Замкніть пунктирну лінію, двічі клацнувши мишкою. Збільште показник на шкалі «Розмиття кордонів», потягнувши повзунок вправо, та натисніть "Застосувати".

Збільште масштаб знімка, щоб результат був максимально точним та акуратним

Тепер з'ясуємо, як на фото вставити іншу особу так, щоб різниця була непомітна. Для цього потрібно трансформувати обрізаний шар. Змініть розмір нового зображення, потягнувши виділення за кути. "Нова" особа повинна співпадати з розміром особи на вихідному зображенні. При необхідності поверніть шар, рухаючи повзунок на шкалі "Кут повороту". Режим змішування «Нормальний»буде виставлений за замовчуванням, але за бажання ви можете вибрати інший. Готово! Натисніть кнопку «Застосувати».

Відрегулюйте накладання шару так, щоб «нова» особа виглядала максильмано натурально

Крок №3. Рівні та корекція кольорів

Все ще дуже помітно, що обличчя було взяте з іншого зображення. Виконаємо найпростішу корекцію кольору. Для цього у вкладці «Зображення»відкрийте «Рівні». Розібратися у використанні цієї функції дуже просто. На шкалі «Рівні на вході» 3 повзунки - білий (світлі відтінки), сірий (напівтону) і чорний (темні відтінки). З їхньою допомогою ви зможете комплексно налаштувати яскравість фотографії. Змініть положення повзунків, щоб затемнити (вправо) або освітлити (вліво) зображення. Потім збережіть його, натиснувши «ОК».

Регулюючи рівні, ви зможете зробити картинку з «новим» обличчям однотоннішим.

Крок №4. Працюємо з деталями

Тепер ви знаєте, як у фото вставити іншу особу максимально природно, але цим ваші можливості не обмежуються. Якщо обробка потребує окремих областей зображення, скористайтеся інструментами на панелі ліворуч. Виберіть «Пензель розмиття», щоб зробити перехід від вихідного знімка ще плавнішим. Налаштуйте параметри інструменту – чим менший об'єкт обробки, тим менший розмір та прозорість пензля.

Також ви можете аналогічно затемнити або освітлити окремі ділянки фото, додати їм різкості, контрасту або насиченості. Просто виберіть відповідний пензель на панелі інструментів та обробте потрібну частину зображення.

Використовуйте щітки затемнення та освітлення, щоб надати зображенню більше обсягу

Крок №5. Зберігаємо та ділимося з друзями

Оцінимо остаточний результат.

Фотомонтаж допоможе приміряти на себе роль улюбленого кіноперсонажу

Ви зможете відрегулювати якість знімка перед збереженням

Готово! Тепер ви знаєте, що вставити обличчя в іншу фотографію у фотошопі – не єдине рішення. Ця інструкція є універсальною, використовуйте її на практиці так, як вам заманеться. Дізнайтеся і відкрийте для себе нові можливості програми! «Домашня фотостудія» стане для вас вірним помічникому будь-якій ситуації, коли потрібно якісно обробити знімок.

Ми випустили нову книгу «Контент-маркетинг у соціальних мережах: Як засісти в голову передплатників та закохати їх у свій бренд»

Є безліч інструментів, які готові допомогти вам покращити сайт, підвищити ефективність онлайн бізнесута налагодити взаємодію з клієнтами. Серед таких інструментів багато безкоштовних. Але якщо ви не веб-розробник і не знаєте, як встановити їх на свій сайт? Це велика перешкода.

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

Спробуємо вирішити дві проблеми відразу, розповівши про найпоширеніші способи вставки коду/сніппетів (фрагментів) JavaScript для сайтів:

• WordPress.
• Самописні адмінки (за допомогою олдскульного FTP).
• На Squarespace.
• На Shopify.

Наприкінці статті торкнемося Wix. У більшості випадків ця платформа не дозволяє встановлювати коди або фрагменти JavaScript, зате вона пропонує альтернативу у вигляді інтеграцій для різних сервісів.

Де взяти код для встановлення

Подивимося, де шукати код для інсталяції з прикладу сервісу Crazy Egg.

Процес стандартний: вводимо реєстраційні дані після завантаження потрапляємо в дашборд. Там шукаємо розділ із кодом.

Як вставити код на сайт WordPress

Можна скористатися спеціальним плагіном – Tracking Code Manager.

Щоб вставити Tracking Code Manager, входимо в адмінку сайту та в панелі керування шукаємо розділ плагіни.

Вибираємо функцію "Add New" (додати новий).

Справа з'явиться рядок пошуку. Вводимо "Tracking Code Manager", потім тиснемо "Install Now".

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

Тиснемо "Add new Tracking Code".

Можна обійтися без плагіна Tracking Code Manager. У такому разі наш варіант – вставити код у файл header.php теми WordPress(Про це далі).

Як встановити код на сайт WordPress.com

Сайт на базі WordPress та сайт WordPress.com – дві різні речі.

Сайт на базі WordPress – це сайт, який керується за допомогою CMS, яка встановлена ​​на власному сервері. Це означає, що ви заплатили за доменне ім'я (myname.com) та за хостинг.

Сайт WordPress.com безкоштовний. Ви можете зареєструвати на ньому сайт без хостингу. У цьому URL сайту буде: myname.wordpress.com. Щоб змінити доменне ім'я, доведеться виконати кілька додаткових кроків.

Керуючи сайтом на WordPress.com, ви обмежені у виборі кодів та фрагментів JavaScript, які можете встановити. Причина у протоколі безпеки – розробники не дозволяють користувачам вставляти коди на платформу. Наприклад, розробники MySpace дозволяли. Очевидно тому сайт за шість років опустився з 5 місця у світі на 1967 рік.

Водночас WordPress.com пропонує користувачам різні бонуси для ведення бізнесу. Наприклад, інтеграцію з Google Analytics або додати кнопки соцмереж. Але в деяких випадках цього може бути замало.

Як встановити коди та сніпети JavaScript на самописну адмінку

За допомогою FTP. Доведеться повернутись до основ основ.

Зараз багато сайтів самописні. Самописний сайт створено з нуля, для керування контентом не використовує CMS.

Уявімо, що у нас саме такий сайт. Поставити на нього код буде складніше, ніж на WordPress, тому що доведеться згадати про FTP.

FTP-менеджери на кшталт FileZilla дозволяють перетягувати файли та зображення із сайту на сервер. За допомогою програми можна додавати файли на сервер або завантажувати їх, замінювати старі файли на нові, видаляти непотрібні дані, змінювати назви доків.

У протоколі передачі даних немає нічого складного: вже за 20 хвилин можна відчути себе профі. Для більшості людей найскладніша частина – просто зв'язатися із сервером.

Якщо у вас виникли проблеми з сервером, зв'яжіться з хостингом. Це може зайняти годину, зате через 60 хвилин ви знатимете все, що потрібно. Я зазвичай рекомендую записувати такі розмови через ScreenRecorder. Або щонайменше робити позначки вручну.

Після того, як ви зайшли на сервер FTP, обов'язково зробіть . Якщо здійсните помилку, важливі файли нікуди не подінуться. Зробити резервну копію можна за допомогою простого перетягування всіх файлів із сервера на комп'ютер.

Зазвичай програмний інтерфейс FTP-менеджера складається із двох колонок. Наприклад, на зображенні нижче в лівій колонці ви бачите файли, які зберігаються на комп'ютері. У правій – файли із сервера.

Щоб змінити або додати файли, просто перетягуйте їх з однієї колонки до іншої.

Попередження

Заміна файлів є небезпечною. Запросто можна замінити нову версіюфайл старої і втратити більш актуальні дані, випадково видалити щось важливе або зробити іншу помилку. Резервна копіядозволяє підстрахуватися на випадок таких промахів та захистити себе від зайвих проблем. Не забудьте зберегти всі файли в окремій папці на комп'ютері до внесення змін.

Як вставити код за допомогою header.php

Допустимо, у нас є сайт, для керування яким ми використовуємо WordPress. Щоб вставити код, нам потрібно знайти файл header.php або інший файл під назвою headerабо head.
Headerпотрібний для активації коду або фрагменту JavaScript на всіх сторінках сайту. Щоб відкрити файл, можна використати безкоштовну програмуна кшталт Sublime Text. З її допомогою слід відкрити файл, який зберігається на комп'ютері, а не схожий файл на сервері.

Відкривши файл у Sublime Text, ми побачимо веселку із кольорового коду. Не бійтеся, там усе просто.

Усі сторінки поділяються на дві секції – The head (заголовки) та the body (тіло). Заголовки позначаються кодом HTML і. Тіло – і.

Більшість штук, які змушують сайт працювати і відображати текст, знаходяться між цими двома секціями. Щоб знайти ці теги, можна скористатися пошуком по сторінці.
У більшості випадків вставити код можна прямо перед тегом, що закриває.

Після того, як ви вставили код або сніпет, збережіть файл і завантажте його на сервер. Готово.

Тепер про самописні адмінки. Якщо ваш сайт створювався вручну і ви не можете знайти файл head або header, швидше за все вам доведеться вставляти код вручну на кожну сторінку. Найчастіше це не викликає великих труднощів.

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

Як вставити код на сайт Squarespace

Squarespace спростив завдання своїм користувачам. Щоб вставити код або сниппет JavaScript, можна використовувати code injection. У меню переходимо за вкладками Settings > Advanced > Code Injection. Можна додати код до або футер сайту.

Знаходимо налаштування.

Гартуємо нижче і клацаємо по Advanced.

Вибираємо "Code Injection".

Вставляємо код та зберігаємо зміни.

Як вставити код на Shopify

У панелі керування знайдіть розділ з інтернет-магазинами Online Store та виберіть теми Themes.

Щоб отримати доступ до потрібної вкладки, клацніть на «Actions» та виберіть «Edit HTML/CSS».

Нам потрібні фрагменти.

Клік по опції відкриє діалогове вікно із можливістю додати новий фрагмент.

Дайте назву сніппету та натисніть на кнопку Create snippet.

Введіть код для сніпету в зону для tracking snippet.liquid. Натисніть "Зберегти".

Як вставити код, якщо сайт на Wix

Wix швидко став найпопулярнішим конструктором сайтів. Як і WordPress.com, він накладає на своїх користувачів обмеження щодо можливості вставки кодів.

Але Wix пропонує рішення у вигляді Wix App Market. Там можна знайти різноманітні віджети для маркетингу, соціальних медіа та аналітики. До речі, там же можна проголосувати за найнеобхідніший віджет.