Embedding Cinema8 Interactive Videos

Embedding Cinema8 Interactive Videos

Embedding Cinema8 interactive videos enables seamless integration with your websites, mobile apps, and LMS platforms. Whether you’re creating engaging marketing campaigns, enhancing e-learning courses, or adding interactivity to mobile apps, embedding makes your content easily accessible without requiring viewers to leave the platform.

Steps to embed a Cinema8 video

Step 1: Publish your video

Ensure your video is published before embedding it. Open your video in Cinema8 Creative Studio. Click the Publish button in the top-right corner. Once published, the video is ready for embedding.

Step 2: Access the embed code

Open the Sharing Options menu by clicking the Share button in the top-right corner. Select the Embed Code tab. Choose your preferred embed type:

• Fixed dimensions: Specify a width and height for the embedded video.
• Responsive dimensions: Allow the video to adapt dynamically to the container size.

 

Step 3: Copy the embed code

After selecting the desired embed type, click the Copy Embed Code button. The HTML iframe code will now be copied and ready to paste.

Embedding options by platform

1. Embedding into websites

Open your website editor (e.g., WordPress, Wix, or custom HTML editor). Add an HTML block or use your platform’s embed tool. Paste the Cinema8 embed code into the block. Save and preview your webpage to ensure proper playback. 💡 Tip: Use responsive dimensions to optimise the viewing experience on different devices.

2. Embedding into mobile apps

To integrate interactive videos into mobile apps, you’ll need to use WebView components or custom embedding methods based on your app framework:

• For iOS apps: Use a WKWebView to load the video iframe. Example code snippet for Swift:

let webView = WKWebView(frame: self.view.frame)
let videoURL = URL(string: "https://cinema8.com/video/yourVideoID")!
let request = URLRequest(url: videoURL)
webView.load(request)
self.view.addSubview(webView)

• For Android apps: Use a WebView widget in your activity or fragment. Example code snippet for Java:

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://cinema8.com/video/yourVideoID");

• For cross-platform frameworks (e.g., React Native): Use a WebView library like react-native-webview to embed the video.

3. Embedding into LMS platforms (e.g., Akademi.net, Moodle, Blackboard)

Log in to your LMS platform. Navigate to the Content Upload or Course Management section. Add an HTML block or External Content block (specific to the LMS). Paste the Cinema8 embed code into the block. Save and test playback within the LMS. 💡 Example LMS platforms: Akademi.net, Moodle, Blackboard, Canvas.

Customising your embedded videos

• Set playback controls: In the embed settings, enable or disable player controls (play, pause, volume, etc.).
• Adjust start time: Use the Start At option to begin playback from a specific timestamp.
• Add domain restrictions: In the Privacy Settings, restrict the video to play only on specified domains.

Why embed Cinema8 videos? Tips for effective embedding

• Test responsiveness: Ensure embedded videos display correctly on mobile, tablet, and desktop screens.
• Use secure domains: For added security, restrict your embed code to authorised domains only.
• Optimise performance: Ensure your website or app loads the video efficiently by testing loading speeds and avoiding excessive resource usage.