Встраивание видео на ваш сайт - Поддержка - Wistia

  1. Fallback (iframe) Embed
  2. Адаптивный дизайн с встроенными встраиваниями
  3. Адаптивный дизайн с Popover Embeds

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

Как только вы закачанный а также подгонянный ваше видео, вы готовы идти дальше и вставлять. Ура!

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

Код для встраивания - это фрагмент кода, который можно использовать для добавления содержимого (например, видео!) На веб-страницу.

Чтобы создать код для встраивания вашего видео, начните с выбора параметра « Внедрить и поделиться» в меню «Действия видео» на странице вашего видео в Wistia. Откроется экран «Внедрить и поделиться», где вы сможете выбрать тип кода для встраивания и настроить его для своей страницы.

Существует два основных типа встраиваемых кодов Wistia: Встроенные встраивания а также Поповер встраивает , Продолжайте читать, чтобы узнать больше об обоих!

Встроенные встраивания разместят видео непосредственно на странице, в соответствии с остальным содержимым. Вот пример встроенного встраивания «Стандарт»:

Вот как выглядит стандартный встроенный код для вставки:

<script src = "// fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async> </ script> <script src = "// fast.wistia.com/assets/external/E-v1.js" async> </ script> <div class = "wistia_embed wistia_async_j38ihh83m5" style = "высота: 349 пикселей; ширина: 620 пикселей"> & nbsp; </ div>

Не стесняйтесь захватить этот код для встраивания, чтобы попробовать его, или перейти на свой аккаунт Wistia и получите встроенный код для вставки собственного видео!

Встраивания Wistia чрезвычайно настраиваемы, и с ними очень весело работать (если можно так сказать самим). Если вы хотите стать модным с нашим JavaScript API 💃, эта ссылка для вас ,

Fallback (iframe) Embed

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

Врезка Fallback похожа на Субару Импреза : просто, надежно, и если вы попросите вистианца написать эту страницу помощи, довольно хороший способ добраться из пункта А в пункт Б.

Если вы не можете включить JavaScript на своем веб-сайте, или из-за чего-то стандартное встраивание выглядит немного… странно, попробуйте опцию Fallback.

Вот пример резервного встроенного кода:

<iframe src = "// fast.wistia.net/embed/iframe/avk9twrrbn" allowtransparency = "true" frameborder = "0" scrolling = "no" class = "wistia_embed" name = "wistia_embed" allowfullscreen mozallowfullscreen полный экран = "620" height = "349"> </ iframe> <script src = "// fast.wistia.net/assets/external/E-v1.js" async> </ script> Встраивание Fallback должно использоваться только только если стандартная встроенная вставка не будет работать на вашем сайте по какой-то странной причине. пожалуйста Расскажи нам если это произойдет!

пожалуйста   Расскажи нам   если это произойдет

Встраиваемые коды Popover заставляют ваши видео появляться поверх всего остального контента, а не воспроизводить его в режиме реального времени.

Вы можете запустить всплывающее видео с текстовой ссылкой или миниатюрой изображения. При нажатии на эту ссылку откроется лайтбокс с вашим видео внутри. Вот пример встраивания popover с использованием опции thumbnail:

И вот код вставки popover позади этого видео:

<script src = "// fast.wistia.com/embed/medias/pukozq6xf0.jsonp" async> </ script> <script src = "// fast.wistia.com/assets/external/E-v1.js" async> </ script> <span class = "wistia_embed wistia_async_pukozq6xf0 popover = true popoverAnimateThumbnail = true" style = "display: inline-block; высота: 169px; ширина: 300px"> & nbsp; </ span>

Скопируйте и вставьте это на свой сайт, чтобы попробовать! Обязательно прочитайте раздел Адаптивный дизайн с Popover Embeds также.

Если вы хотите изменить поведение встраивания вашего поповера за пределы возможностей, доступных на экране «Внедрить и поделиться», ознакомьтесь с Настройка Popover стр.

Адаптивные видео - это счастливые видео. Адаптивность работает немного по-разному для встроенных и поповерных встраиваний, так что давайте разберем и то и другое отдельно here.

Адаптивный дизайн с встроенными встраиваниями

Встроенные коды встраивания по умолчанию являются адаптивными, а это означает, что размер вашего видео автоматически изменится по ширине контейнера. Ура!

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

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

Вот пример адаптивного встраивания для игры:

<script src = "// fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async> </ script> <script src = "// fast.wistia.com/assets/external/E-v1.js" async> </ script> <div class = "wistia_responsive_padding" style = "padding: 56.25% 0 0 0; позиция: относительная;" > <div class = "wistia_responsive_wrapper" style = "высота: 100%; слева: 0; позиция: абсолютная; верх: 0; ширина: 100%;" > <div class = "wistia_embed wistia_async_j38ihh83m5 seo = false videoFoam = true" style = "высота: 100%; ширина: 100%"> & nbsp; </ div> </ div> </ div>

Адаптивный дизайн с Popover Embeds

Для встраивания popover необходимо учитывать две разные вещи:

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

Миниатюра встраивания поповера не отвечает по умолчанию. Но если вы хотите, чтобы он был отзывчивым, это так же просто, как установить флажок «Отзывчивый»:

Это все, что нужно, чтобы сделать миниатюру отзывчивой. Wahoo!

Видеокомпонент поповера по умолчанию встраивает _is_ отзывчивый. Поскольку видео «всплывает» на остальной части страницы, ему не нужно беспокоиться о столкновении с чем-либо еще. Он автоматически заполнит большую часть страницы, оставляя некоторое удобное пространство между видео и краями окна браузера.

Видео SEO - это набор инструментов и процессов, которые помогают поисковым системам идентифицировать и индексировать ваши видео. Стандартные встраиваемые коды Wistia автоматически оптимизированы для SEO и помогут людям найти ваши видео на вашем сайте, а не чей-то еще ,

Проверьте Видео страница помощи SEO для более подробной информации 🔍 и советов о том, как сделать видео SEO правильно.

Проверьте   Видео страница помощи SEO   для более подробной информации 🔍 и советов о том, как сделать видео SEO правильно

Электронная почта - это отличный способ поделиться своими видео и снова привлечь свою растущую аудиторию. А инструменты электронного маркетинга Wistia делают это легко! Увидеть Рекламная рассылка страница для деталей.

Хотите, чтобы ваши видео могли воспроизводиться только на вашем веб-сайте (и, конечно, в вашей учетной записи Wistia)? Проверять, выписываться Ограничения домена для этого. Для получения дополнительной информации о безопасности ваших видео, см. Безопасность руководство.

Теперь, когда ваше видео встроено в вашу веб-страницу, вы можете использовать аналитику Wistia, чтобы увидеть, как ваши зрители взаимодействуют с контентом.

Ознакомьтесь с аналитической функциональностью Wistia ,

Встраивание может быть жестким! Если вы застряли, проверьте Вставить Устранение неполадок документация.

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

Похожие

Адаптивный веб-дизайн и SEO
... создания масштабируемых и бесшовных веб-свойств для настольных компьютеров, планшетов и мобильных устройств, но это не всегда лучший выбор для SEO. Решая, стоит ли создать адаптивный веб-дизайн Есть много факторов, которые необходимо учитывать. R2i рекомендует взвесить все ваши варианты, чтобы вы могли выбрать вариант, который лучше всего подходит для ваших бизнес-целей. Но сначала небольшое понимание
Интеллектуальные методы SEO для привлечения потребителей на ваш сайт
Длинные ключевые слова - это поисковые запросы, состоящие из 4 или более слов. Например, «отель Майами, подходящий для детей, рядом с зоопарком». Эти условия поиска носят более конкретный характер, менее конкурентоспособны и могут привлечь более квалифицированный трафик на ваш сайт. Есть бесчисленное множество длинных ключевых слов, на которые вы можете ориентироваться. По факту, 85% всех поисков в США - длинный хвост
Как включить SEO в ваш маркетинговый план
Хотя большинство тех, кто занимается цифровым маркетингом, знают о важности SEO для успешного ведения бизнеса в Интернете, они могут не знать, как именно это должно быть включено в маркетинговый план. Недостаток этих знаний часто приводит к провалу: потенциальные клиенты, как правило, оставляют позади некоторые компании, которые не приспосабливаются к быстро меняющемуся цифровому ландшафту. SEO является подарком Google для бизнеса. Google также не настолько щедр, чтобы дать вам второй
Окончательное руководство по адаптивному дизайну и SEO
... адаптивный дизайн поскольку они более эффективны для сканирования ботов, индексации и организации контента сайта. Теперь вместо того, чтобы иметь один веб-сайт для настольных компьютеров и один для мобильных устройств, адаптивный сайт имеет один URL и один и тот же HTML на всех устройствах; таким образом, устраняется необходимость для Google индексировать и сканировать несколько версий одного и того же веб-сайта. Кроме того, новая тенденция дизайна повышает производительность
Ваше руководство по внутренним ссылкам
Когда дело доходит до создания собственного сайта, первое сражение - это привлечение пользователей на ваш сайт. Кто-то нажимает и находит ваш сайт с помощью общего поиска и нажимает на вашу страницу. Теперь сложная часть закончена, верно? Не так много. Теперь у вас есть задача удержать
Как оптимизировать SEO сайта Squarespace
... ступных систем веб-хостинга и создания сайтов"> Squarespace - одна из многих доступных систем веб-хостинга и создания сайтов. Он также очень популярен среди определенных отраслей, особенно музыкантов, художников, небольших ресторанов и фотографов, хотя у них есть прочная основа для интернет-магазинов и других сайтов. Ходят слухи, что Squarespace вреден для SEO. Это связано с годами назад, когда любое размещаемое решение было хуже, чем решение с собственным
Как получить YouTube видео для ранжирования в результатах поиска
YouTube обрабатывает более 3 миллиардов поисковых запросов в месяц, что делает его второй по величине поисковой системой в мире. Это согласно инфографике от агентства по производству видео One Productions , который предоставляет удобный обзор SEO для YouTube и пошаговое описание того, как начать оптимизировать ваш видеоконтент. Например, рисунок объясняет, что теги используются для категоризации
SEO для LinkedIn: как оптимизировать ваш профиль в LinkedIn
Если вы хотите, чтобы вас обнаружили в LinkedIn, вам нужно оптимизировать свой профиль для алгоритма поиска LinkedIn. С более чем 330 миллионами пользователей LinkedIn, вы будете замечены рекрутерами и другими бизнес-профессионалами только тогда, когда ваш профиль заполнен на 100%. Кроме того, вам нужно будет добавить правильные ключевые слова в свой профиль, которые определяют ваши навыки. Когда кто-то ищет других людей в LinkedIn, он выполняет поиск только в своей личной сети и на расстоянии
DIY SEO Руководство для продавцов электронной коммерции
Для серьезного успеха с электронная коммерция веб-сайт, вы должны думать о поисковой оптимизации (SEO). И если на вашем плече сидит маленький дьявол, говорящий вам, что это не имеет никакого значения, давайте будем тем, кто отмахнется от этого парня и скажет вам, что интернет-магазин нуждается в такой же любви и заботе о SEO,
15 Не могу пропустить ресурсы по видео-маркетингу и видео SEO
Если в 2014 году мы точно определимся, то это видео маркетинг огромный. Поэтому для маркетологов важно понять, что именно это означает для их контент-стратегии. Вот сводка последних ресурсов по видео-маркетингу, чтобы вы могли эффективно использовать эту тактику в Новом году.
Отрицательный SEO: 6 способов защитить ваш сайт от отрицательного SEO
... ть ли у нас SEO, которые нарушают правила, чтобы испортить репутацию сайта и снизить его рейтинг на страницах результатов поисковой системы (SERP)? К сожалению, да. Отрицательный SEO существует, и это стало законной опасностью. В этой статье мы поможем вам понять, что такое отрицательный SEO, как он работает, и как вы можете защитить свой сайт от потенциальных негативных SEO-атак. Что такое отрицательный SEO? Журнал поисковой системы

Комментарии

Будет ли ваш сайт занимать первые места в поиске Google через 10 лет?
Будет ли ваш сайт занимать первые места в поиске Google через 10 лет? Может быть ... Тогда давайте рассмотрим следующее: Любые виды искусственных манипуляций, выполненные так, чтобы Google Положение контента можно было бы считать «вне правил». Теперь, если вы повторяете ключевое слово несколько раз в статье, это естественно? Тем не менее, я собираюсь дать вам совет по созданию ссылок, который может изменить ваш взгляд на SEO,
Влияет ли на скорость конверсии адаптивный дизайн?
Влияет ли на скорость конверсии адаптивный дизайн? С ростом производительности пользователей благодаря адаптивному дизайну веб-сайты отмечают увеличение коэффициентов конверсии. Крупные компании, такие как State Farm и Career Builder, сообщают о резком увеличении коэффициента конверсии после смены дизайна сайта. На самом деле, State Farm в твиттере повысил коэффициент конверсии на всех устройствах на 56 процентов, в то время как Career Builder написал, что их коэффициент конверсии
Мы регулярно получаем электронные письма с историей «О, как красив ваш сайт, у нас есть сайт на ту же тему; мы будем обмениваться ссылками?
Мы регулярно получаем электронные письма с историей «О, как красив ваш сайт, у нас есть сайт на ту же тему; мы будем обмениваться ссылками? ». Эти типы ссылок работают плохо или не работают вообще и вызывают только грязную ссылку. Разместите ссылку на свой сайт во всех профилях социальных сетей (Twitter, страница компании Facebook, Google Plus ). SEO совет № 9: Используйте заголовки Заголовки гарантируют, что контент
Ваш сайт когда-либо подвергался негативному влиянию SEO?
Ваш сайт когда-либо подвергался негативному влиянию SEO? Какие профилактические меры вы бы порекомендовали? Дайте нам знать ваши мысли в разделе комментариев. Если вам понравилась эта статья, вам также может понравиться:
Конкретно, как повлияет это решение на ваш сайт?
Конкретно, как повлияет это решение на ваш сайт? Google подталкивает сайты, чтобы перейти на HTTPS Размещенный в блоге Google, посвященном вопросам безопасности, билет вызвал сенсацию в начале февраля. В нем четко указано, что незащищенные веб-сайты (которые еще не приняли Протокол HTTPS ) будет сообщено как таковое в следующей версии браузера Chrome
Хотите, чтобы Ваш сайт был в ТОП поисковой выдачи?
Хотите, чтобы Ваш сайт был в ТОП поисковой выдачи? Теги: оптимизация сайта, search engine optimization, поисковая оптимизация, белая оптимизация сайтов, продвижение сайта
Кто будет посещать ваш сайт?
Кто будет посещать ваш сайт? И как вы будете привлекать посетителей? Крупные корпорации, обладающие гигантскими бюджетами на брендинг, могут позволить себе успешно продвигать и выдумывать названия брендов, такие как Amazon, Google, Target, Sears и т. Д. Эти имена короткие, простые и легко запоминающиеся, и поддерживаются их крупными рекламными компаниями. могут распространять свои имена среди миллионов людей и повторно показывать рекламу, которая сжигает (бренды) имена в сознании людей.
Ваш сайт (или некоторые его разделы) не работает потому что что-то случилось, но вы еще не знаете?
Кто будет посещать ваш сайт? И как вы будете привлекать посетителей? Крупные корпорации, обладающие гигантскими бюджетами на брендинг, могут позволить себе успешно продвигать и выдумывать названия брендов, такие как Amazon, Google, Target, Sears и т. Д. Эти имена короткие, простые и легко запоминающиеся, и поддерживаются их крупными рекламными компаниями. могут распространять свои имена среди миллионов людей и повторно показывать рекламу, которая сжигает (бренды) имена в сознании людей.
Ваш сайт опустился на несколько позиций в поисковом рейтинге?
Ваш сайт опустился на несколько позиций в поисковом рейтинге? Если это так, вы можете стать жертвой негативного SEO. Отрицательный SEO - это использование тактики «черной шляпы» для саботажа сайтов и снижения их рейтинга в поисковых системах. Если вы новичок в SEO, то вы также можете быть новичком в термине «черная шляпа SEO». Этот термин охватывает агрессивную тактику, предназначенную для игры в Google и других поисковых системах. К сожалению, поразительно
Так как же вы предотвращаете то, что ваш сайт постигнет та же участь?
Так как же вы предотвращаете то, что ваш сайт постигнет та же участь? Вот пять простых шагов, чтобы процитировать контент без ущерба для вашего SEO : Возьмите как можно меньше : берите только то, что вам нужно, чтобы выразить свою точку зрения: чем меньше контента вы копируете, тем лучше для вас. Старайтесь, чтобы содержание копировалось в одном промежутке под предложением или двумя, не более
Закрыть, избегать нарушения правил качества схемы ссылок Google , Вы не хотите, чтобы ваш сайт или ваши клиенты исчезли из органических результатов, верно?
Так как же вы предотвращаете то, что ваш сайт постигнет та же участь? Вот пять простых шагов, чтобы процитировать контент без ущерба для вашего SEO : Возьмите как можно меньше : берите только то, что вам нужно, чтобы выразить свою точку зрения: чем меньше контента вы копируете, тем лучше для вас. Старайтесь, чтобы содержание копировалось в одном промежутке под предложением или двумя, не более

Все еще не повезло?
Теперь сложная часть закончена, верно?
?ть ли у нас SEO, которые нарушают правила, чтобы испортить репутацию сайта и снизить его рейтинг на страницах результатов поисковой системы (SERP)?
Что такое отрицательный SEO?
Будет ли ваш сайт занимать первые места в поиске Google через 10 лет?
Теперь, если вы повторяете ключевое слово несколько раз в статье, это естественно?
Влияет ли на скорость конверсии адаптивный дизайн?
Мы регулярно получаем электронные письма с историей «О, как красив ваш сайт, у нас есть сайт на ту же тему; мы будем обмениваться ссылками?
Ваш сайт когда-либо подвергался негативному влиянию SEO?
Какие профилактические меры вы бы порекомендовали?