Implementation

Compatibility

PC

Mac

Mobile devices

Desktop browsers

We support current versions of Internet Explorer, Firefox, Chrome on PC, and current versions of Firefox, Chrome, and Safari for OSX. Current versions are those with more than 7 percent global market share¹.

Mobile devices

Mobile device support assumes a data connection that can support streaming video.

iOS devices: We support the two most recent generations of hardware, and the two most recent versions of the OS. Due to the hardware and operating system limitations of the iPhone some projects may not perform well on iPhone. Rapt Media’s technology is optimized for iPhone 5+. Although projects will play in iPhone 4+, performance is not guaranteed. In the event of an issue with the project as designed that cannot be addressed in time for commercial launch, an alternate mobile version of the project will be developed.

Android devices: We support hardware with a greater than 2 percent global market share² and the three most recent minor revisions of the Android OS. For Android’s native browser, we test against devices that have a greater than 2 percent market share². We may work on more devices, but due to the fragmentation of the Android device market and the variability of the OS by device and by carrier, we are unable to test against the majority of Android devices.

¹ Browser market share determined by StatCounter global stats.

² Android market share determined by AppBrain device stats.

Making Your Rapt Media Video Responsive

Rapt Media interactive videos are delivered by way of an HTML iframe element. Like other elements on your page, iframes can be responsive in order to fill the whole screen when rotating your device from portrait to landscape. Below are two ways to do this. We recommend the CSS option if your video is going to live on a simple page. Use the JS solution for more complex and heavier pages.

It is important to note that all pages are different in their complexity and stylings, and the below solutions are guidelines that, when implemented on a blank page, will make your video responsive. You may need to experiment with the solutions below to find what works best within the context of your page.

HTML/CSS Solution

Add the following HTML to your page:

<div class="wrapper">
    <div class="responsive">
    <!--Your iframe goes below-->
    <iframe src="http://cdn1.raptmedia.com/projects/ID/embed" width="720" height="405" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"><p style="text-align:center">Iframes are required to view this content.</p>
    </iframe>
    </div>
</div>

Next, style the elements with the following CSS:

.wrapper {
    width: 100%;
}
.responsive {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 25px;
    padding-bottom: 57.25%;
}
.responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Javascript Solution

For a more targeted solution, add the following code between <script> tags on your page:

handleResizeOrientationChange = function() {
 	$playerIframe = $(".player-iframe")[0];
 	$($playerIframe).width(window.innerWidth);
 	$($playerIframe).height(window.innerWidth / 1.7777);
};
$(function() {
 	$playerIframe = $(".player-iframe");
 	$(window).on("resize orientationchange", function() {
 	   handleResizeOrientationChange;
 	});
});