Встраивание видео на ваш сайт - Поддержка - 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 правильно.

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

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

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

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

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

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

Похожие

Комментарии