If you are not looking to display Videowise widgets on your online store, and would like to have an easy way to push videos on-site, follow our tutorial below on how to embed any videos sitting in your library using iframes.
Iframealways worksIframedoes not need any additional JS + CSS (even if the app extension is not enabled, embed works)Iframeassets don’t show in PageSpeedIframeuses media chrome with native support for CC, chapters, fullscreen, and floating player
How to customize the default Iframe when embedding a video
To get started with embedding videos onsite, you will probably need to update the limited default customization settings that embedded videos can offer. You can set a default player design for all embeds from the Global styles section of Videowise's settings.
To do that, head to Videowise > Settings > Global Styles > Video Embed.
You will find the different customization options that embedded videos offer:
Controls: choose to always display the player controls, display them only on hover, or hide them completely.
Display play button: you can choose to turn it on or off, and choose between an "Icon button" or a "text button"
Icon button: if enabled, you can choose between 4 different icon styles, the sizing, as well as the background and stroke colours of the icon.
Text button: If enabled, you'll be able to edit the text, its sizing, the text-position, as well as the button background colour.
Video autoplay: choose to enable or disable autoplay on your embedded videos.
How to embed a video on-site
Once happy with your video player's design, head over to your Library and select the video you would like to embed. Click on it to open the video details and settings.
On the video details' left sidebar, you will find a section called "Video embed". Click on it to display the embed code that you can then copy.
Copy the code by clicking on the button.
Iframes can be embedded into any HTML components of your online store. In this example, we will show you how to add it to Shopify's default "Dawn" theme.
Once copied, head over to your Shopify theme editor.
In the theme editor, click on "Add section" on the left sidebar, and search for the "Custom liquid" section. Place it anywhere you would like the embedded video to be displayed, and once happy, paste the code into the Custom liquid box.
Your video will be displayed and will follow the settings you set in the Global styles section.
Iframes come with different styling you can control directly within the HTML, such as the width, height, and other elements you can animate and play around with.
Default Videowise embedded code:
<iframe width="2880" height="2160" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" title="6976086-uhd_2880_2160_25fps" src='https://assets.videowise.com/vw_video_embed.html?id=680f8ca6acac0200582bbfdc' />
Example of an updated Videowise embedded code with different width and height.
<iframe width="100%" height="600" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" title="6976086-uhd_2880_2160_25fps" src='https://assets.videowise.com/vw_video_embed.html?id=680f8ca6acac0200582bbfdc' />