Before publishing a Vudoo video, it’s important to test out the embed code. Different CMSes have different setups, meaning your code may need to be slightly altered, or your website may have restrictions in place that means Vudoo’s style guide/Javascript can’t be properly embedded.
It’s important to ensure that you’re bringing in your web developers early in the project so they can test and change any CSS or scripting that may be needed to ensure the best video and user experience.
To help you and your developers understand the different parts of Vudoo’s code, we’ve broken down the three different sections - style, iFrame and Javascript - so you can understand what they mean, what they do and why they’re important.
Note: These code examples are designed for use on non-mobile devices (eg. desktop computers, laptops, tablets). Vudoo videos are already optimised to play fullscreen and responsively on mobile devices.
The Vudoo embed code
To help you and your developers understand the different parts of the Vudoo’s embed code, we’ve taken a look at each of the three sections - style guide, iFrame and Javascript, so you can understand what they mean, what they do and why they’re important.
Style Guide
<!-- VUDOO --><style>.vudoo--embed { position: relative; padding-bottom: ""; height:360px; overflow: hidden; max-width: 100%; width:640px; margin: auto;}@media(max-width: 768px){ .vudoo--embed {padding-bottom: 56.25%; height: 0;} }.vudoo--embed iframe,.vudoo--embed .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
The style section of the Vudoo embed code is auto generated by the Vudoo platform’s share screen, based on your video’s aspect ratio. This ensures the aspect ratio of your video maintains proportional dimensions, so the height and width of your video won’t get skewed by different sized devices, or when a viewer's browser window is resized during events such as flipping a mobile phone from portrait to landscape. This style section is recommended, but can be removed in situations where your embedding page may already have styles to cater for video embeds, or where the Vudoo styles may conflict with these.
iFrame
<div class="vudoo--embed"><iframe id="vudoo-iframe-xxxxxxxxxxx" width="640" height="360" src="https://vudoo.io/embed/xxxxxxxxxxx” frameborder="0" allow="autoplay" allowfullscreen ></iframe>
The iframe section of the Vudoo embed code is the container where your video will be served to the viewer. The bounding area of the iframe can be as big or as little as you need, depending on the embedded page's design.The Vudoo platform will generate 3 standard generic sizes, but you can change the iframe size to cater for your embed page.
The Vudoo iframe has some important attributes that shouldn't be removed, id, allow="autoplay" and allowfullscreen.
The id="xxxxxxxx" attribute is the unique identifier of the iframe and is targeted by the Vudoo styles and JavaScript to behave independently of any other element on your page. This also allows the use of having multiple Vudoo videos served from within the same embed page.
The allow="autoplay" attribute tells the Vudoo player to autoplay if this option has been set and complies with the Google autoplay policy (https://developer.chrome.com/blog/autoplay/).
This option can be set by selecting the embed code size and "Autoplay" option from the Vudoo share screen embed tab.
The allowfullscreen attribute requests the browser to allow the Vudoo video to enter fullscreen mode if the viewer clicks the fullscreen option on a desktop computer, or automatically enters fullscreen when a viewer clicks play on mobile. Please note that the iPhone is an exception to the scenarios listed here - but more on that in the next section.
Viewing a Vudoo video in fullscreen is important to both you as the Vudoo client, as well as your viewers. Watching a video in a small contained space can be a terrible user experience, meaning your audience is much less likely to engage with your content.
Javascript
<script src="https://vudoo.io/sites/all/themes/basic/dist/js/vudoo__vxo_frame.min.js?cb=r1obun"></script><script>document.getElementById("vudoo-iframe-xxxxxxxxxxx").onload = function() {var vudooFrame = new vudooIframeEmbed({frame:this,embedid:"xxxxxxxxxxx"});};var toggle_frame_screen=function(e,t){var l=document.getElementById("vudoo-iframe-xxxxxxxxxxx");e?(l.style.position="fixed",l.style.bottom="0",l.style.left="0",l.style.width="100vw",l.style.height="100%",l.style.zIndex="500000"):(l.style.position="",l.style.top="",l.style.bottom="",l.style.left="",l.style.width="",l.style.height="",l.style.maxWidth="100%",l.style.zIndex="");};</script></div><!--./VUDOO →
In this section, we're going to explain the importance of the JavaScript snippet that is shipped with the Vudoo embed code.This JavaScript has a few tasks it gets assigned, and without it, you're essentially embedding a plain old video on your page that could potentially create a negative experience for your users.
The only time this JavaScript gets executed is during a mobile view experience. The Vudoo JavaScript on desktop computers is basically ignored over at the Vudoo end.
The Vudoo JavaScript is a way of communicating from your embed page through to the Vudoo server. It tells the Vudoo player how to behave on certain devices and also allows API communication from your page triggering or listening to certain events. You can read more about that here.
Let's go through the tasks the Vudoo JavaScript plays on the interactive video experience:
When a viewer is on a mobile device, the first task is executed once a viewer clicks play. This tells the Vudoo player what kind of device the viewer is on and what the Vudoo player expects to handle.
The second task is to notify the Vudoo player if a viewer is on an Apple iPhone device. This is important to iPhone users. To serve the best possible experience to the viewer and their device, Apple iPhones don't exactly allow fullscreen inline video like most other mobile devices. Instead, they have an internal application called Quicktime that serves videos when in fullscreen mode.
Due to this behaviour on Apple iPhones, the Vudoo interactions are not allowed to enter in Quicktime. To mitigate this, the Vudoo player simulates a fullscreen experience by asking the embedded page to allow the Vudoo player's iframe to expand fluidly, taking up the full mobile screen. This ensures the viewer has the best possible experience watching and interacting with your Vudoo video within the full real estate on the iPhone device.
The third task piggybacks off the second task and tells the Vudoo player what kind of components it should be hiding or displaying when serving to an iPhone. Things like the generic fullscreen icon is hidden, and a close button in the top right corner is displayed for the viewer to close the video at any time.
The fourth task is if a viewer rotates an iPhone. In this event, the JavaScript tells the Vudoo player how to resize the Vudoo video and some of its components.
The fifth task is executed when a viewer clicks an external link from within your video. This tells the Vudoo player to go into standby, because the viewer is in another tab and they may return. If a viewer returns, the Vudoo player picks up from where the viewer left off, continuing the interactive video experience.
The sixth and final task the Vudoo JavaScript has is to close the iframe on the viewer’s request and return to the original state, reducing the Vudoo iframe's size back down to the initial size and showing your embed page how it originally was before the viewer clicked play.