While we love the simplicity and visual experience of pop-up videos, displaying videos directly on your website pages makes for a professional and elegant look.
How do embedded videos work
Embedded videos work as part of the general structure of the website through an iFrame. The iFrame is the coding element that allows you to display media content from other sites.
Basically, embedded videos work on your webpage through the technology of the iFrame. And it does so by giving the perspective of a seamless webpage experience.
How to generate an embed code
To generate an embed code with Vidjet, you first need to create a campaign, upload the video, then copy/paste the code into your online shop's theme.
Have a look at this article to see how to embed a video on Shopify.
Have a look at this article to see how to embed a video on any other platform.
How to customize your embedded video
With Vidjet, you have the possibility to customize your embedded videos as follows:
Autoplay - this means that the video will play automatically when the user sees it displayed on the webpage. Videos will be muted by default, as modern browsers keep videos from autoplaying with sound. Important: some mobile operating systems, such as IOS, prevent any form of autoplay when the phone is in battery saving mode.
Loop video - when the video comes to an end, it will start playing again.
Hide controls - this option enables you to hide everything in the control bar, except for the mute icon, the fullscreen button, as well as the centered play and pause button. Stay tuned though: our devs are working on a feature to hide them as well.
Responsiveness - by default, your embedded video will be responsive. This means it will automatically adapt to the width of the container box it is placed in.
For example, if you place the embed code in a container that occupies 50% of the webpage space, the video width will be the same and will grow in height to preserve the aspect ratio of the video. Important: when embedding a portrait video, do not set the container size to be too wide.
If you set the video to not responsive, it won't change size and scale on different screen sizes. Therefore, you have to set a width or a height, and the second input will be automatically filled to preserve the aspect ratio of your videos.Text -> write down whether you want to display any text at the top of the embedded video
Call to action -> choose whether you want to display a Call to action on your video
Link to Page (URL) -> a button that includes a link to a page you want to send visitors to
Coupon Code to Copy -> a button that includes a coupon code your visitors can copy
Email Collector -> an empty space where visitors can write down their email address.
Text color -> select the color of the CTA text
Button color -> select the color of the CTA button
Recommended aspect ratios for embedded videos
Here's a table with 3 aspect ratios that look great in both desktop and mobile screens:
Type of video | Height in pixels | Width in pixels |
Horizontal videos | 200px | 355px |
Square videos | 300px | 300px |
Vertical videos | 400px | 225px |
Important: When you untoggle the responsiveness button, you can input the height or weight dimension and Vidjet will automatically calculate the best aspect ratio.
How to edit an embedded video campaign
If you want to update the embedded video with a new one, you have two options:
if the new video has the same aspect of height and width as the previous one (for example, width=680px and height=480px), you just need to upload it within the Vidjet campaign creator and publish. Really easy for you to showcase all your awesome video content!
however, if the new video does not have the same aspect ratio as the previous one, you will need to replace the old embed code with the new one. This is because the responsiveness size and scale changes and, therefore, the code changes as well.
How to delete an embedded video campaign
After following the steps on how to delete a campaign explained in this article (link), don't forget to remove the iframe code from your theme or website code.
Recommendations of video types for the embedded format
Have a look at this article to see the types of videos we believe work best with this type of format. Please consider that these are simply recommendations, especially for first time video creators. If you already have videos that you want to use/repurpose, go ahead!