How to: Screencast.com Stored Videos - Converting To Responsive Mode To Embed & Play On MemberGate Sites

Tutorial

Addition instructions are included for users of Bill Myers' Video Code Encryption

This tutorial is for users of Screencast.com and Bill Myers' Video Code Encryption Application.

Follow the steps in this tutorial to update the Screencast video player so it is mobile responsive.

 
There are 5 steps to take to complete the process:

A. Access the Share code from Screencast
B. Add the Styling Code to Make it Mobile Responsive
C. Add the NO COPY Encryption Code
D. Add the Video Player Code to your MemberGate site
E. Add the Video to a Content Page

Storage and Software Essentials

1. Notepad or other text editor (try not to use Word as it can add extraneous coding)
   
   
   • To stay organized, add three titles to the text editor page with headings: 'Screencast Video Code', 'Responsive Code' and 'Encrypted Code'
      
     
     
     
     
2. Screencast.com - for storage of videos
   
   
3. EmbedResponsively.com - to add styling to videos so they are mobile friendly on your MemberGate site.
   
   
4. NO-COPY Video Code Encryption Application - only available to BMyers.com Members.
   
   
   • This encryption application hides the video code and ensures that the video can only be played on your own site and if any unauthorised 'borrowing' takes place, the viewer is redirected back to your own Home page when the video play is clicked!

Method

A. Access the Share code from Screencast

1. Visit Screencast and Login to your account
   
   
2. Select the video to embed and click on 'Share'
   
   
3. Click 'Copy' button below 'Embed Code' box on next page (not 'Share URL') and paste code in Notepad under 'Screencast Code' heading
   
   
4. Save the text file with the same name as your video file
   
   
5. Repeat this two-step process for each video to be converted to be responsive
   
   

B. Add the Styling Code to Make it Mobile Responsive

1. Visit Embed Responsively (free site - no login required)
   
   
2. Click on 'Generic iFrame' Media Source link and clear the default example code, if present
   
   
3. Open Notepad for Video 1 and copy/paste long code saved from screencast.com into EmbedResponsively.com's 'Generic iFrame Code' box and click 'Embed'.
   
   
   
   
   
4. The video will load below. Check that this video plays as expected before copying code. If the video doesn't load/error message, refresh page, check you have full iFrame code, re-enter code in the 'Generic iFrame Code' and click Embed.
   
   
5. Copy 'Embed code' (below video) from embedresponsively.com and paste/add to Notepad for Video 1 under 'Responsive' heading and save the text file
   
   
   
   
   
6. Prepare for next video code by deleting Video 1 code from 'Generic iFrame Code' box and click 'Embed' & Refresh, return to 'Generic iFrame Code' box to clear all codes before entering code for next video
   
   
7. Repeat process B1-B7 inclusive for each and every video

C. Add the NO COPY Encryption Code

1. Members of BMyers.com can login to the site
   
   
2. Visit the BMyers No Copy Encryption Code page
   
   
3. Paste saved responsive video embed code for 'Video 1' into the 'Code To Be Protected' box of NOCOPY application
   
   
4. Complete boxes 2 and 3 as directed
   
   
5. Click on 'Encrypt' button and copy encrypted code and add to Notepad under 'Encrypted Code' heading and save the file
   
   
6. Click 'Reset' button after each video code encryption to clear codes from all he boxes
   
   
7. Rinse and repeat Section C1-C6 inclusive for each video
   
   

VERY IMPORTANT!

If you want to embed the encrypted code for any video on more than one site, you will need to repeat Section C for each domain on which you may want a particular video to play.

Even more important to remember - if you should change the domain name of your site where encrypted video codes are embedded, you must repeat Sections C, D & E for each of the videos previously restricted to a given domain otherwise the videos will not play on your new domain!

Section C can be skipped if you are not a member of BMyers.com or if you are not bothered about encrypting video codes using another application to avoid unauthorised use or 'borrowing' of the videos.

D. Add the Video Player Code to your MemberGate site

1. Login to your MemberGate site and visit the Control Panel
   
   
2. Under 'Utilities' select 'Add/Edit Custom Script' to add a new script
   
   
3. Add a name for the script and copy/paste either the saved embed code from embedresponsively.com (or the saved encrypted code from BMyers.com if video code encrypted) into the relevant box
   
   
   
   
   
4. Click the 'Add Custom Script' button
   
   
5. The Preview Screen will show the video and cf tag. You should see your video and success message. Copy the brief code below the video
   
   
   
   
   

E. Add the Video to a Content Page

1. From the Control Panel under 'Content' choose 'Add Content'
   
   
2. Paste the CF Tag into the WYSIWYG editor where you would like the video to appear on the screen
   
   
   
   
   
3. Add the page
   
   
4. Check that the video plays as expected on the preview page.

F. Repeat the Process for each Additional Video

A special thank you to eztechniques.com for these details