Serving Private Videos via CloudFront

CloudFront is a CDN (content delivery network). With its 127 edge locations across the Globe, it makes sure that your videos are quick to buffer anywhere. It is very scalable from small to large businesses, and offers easy pay as you go pricing, while it also provides a certain degree of download protection.

Before you can serve your files using CloudFront:

• your files must be hosted on Amazon S3 bucket. Make sure you follow this guide from step 12. to the end and skip any steps regarding the “file protection”: Serving Private Videos with Amazon S3
• make sure you have the latest FV Player Pro version (our pro module for FV Player. Purchase a license)

This article shows you how to:

• Configure CloudFront keys for FV Player
• Setup a CloudFront HTTP distribution for your video 
• Summary
• Using Your Own CloudFront Domain
• Embedding Videos To Your Posts
• Summary – Practical example

Setting up CloudFront RTMP distribution has been removed, as AWS no longer supports RTMP. 

Configuring CloudFront keys for FV Player

If your videos are public and you don’t need access restrictions, you can skip this part.

1. We will have to setup the CloudFront Key Pairs (public and private key). Unfortunately IAM users are currently not allowed to create CloudFront key pairs, so you cannot use IAM users as trusted signers.

   Log in to your Amazon AWS Management Console and go to your profile -> Security Credentials.

   
   Access your Security Credentials

    

2. You have to create a new CloudFront key pair (or use the existing one, if you have stored your key files, as you should). Select CloudFront key pairs.


Creating a new key pair

3. You will see a popup from which you need to download the “Private Key File” and store it securely because you will need it later.

4. Also, get your Key Pair ID from the Your Security Credentials screen, now that the key was created.

    

   
   Don’t forget your Access Key ID

5. Now that you have both the Private Key File and the Access Key ID – go to WordPress admin panel of your webpage, go to Settings -> FV Player Pro -> Hosting -> scroll down to CloudFront (pro). Enter your Access Key ID and Private Key File which was downloaded in step 4 (copy the entire content of it, it should start with “—–BEGIN RSA PRIVATE KEY—–” and ends with “—–END RSA PRIVATE KEY——). Our plugin now automatically checks if the key is inserted in the right format.
   Note: The key files need to be opened in a simple text editor, such as Notepad on Windows. On Mac, you will have to convert it to a TXT file, so that the system opens it, instead of trying to add it to your keychain.

   
   Private key

   You will also need your CloudFront domain name, you will get that once you’re finished creating the CloudFront distribution.

6. You cannot view your private key for security reasons. It is recommended to change your private key every 90 days. To enter the new key, simply copy the new one (“Click to put in a new one”). Click Save All Changes.
   

   
   CloudFront settings

Setting up CloudFront HTTP distribution

1. First, login into your Amazon AWS at https://console.aws.amazon.com/ and then type “cloudfront” into the Find Services search field. Click Enter.
   

    

    

    

    

    

   
   Finding services in AWS

    

2. Create a new distribution by clicking Create Distribution.

    

    

   
   Creating a new CloudFront distribution

    

3. Click Get Started and use the settings from the following screenshot: 

 


Setting up a new CloudFront distribution

 

 

• Origin Domain Name – pick your Amazon S3 bucket here.
• Origin Path – optional. If you want CloudFront to request your content from a directory in your Amazon S3 bucket or your custom origin, enter the directory name here, beginning with a “/”.
• Restrict Bucket Access – set to Yes if you want the download protection. However make sure you update all your links to the files which use Amazon S3 bucket URLs to the CloudFront URLs!
• Make sure to whitelist following headers(Acess-Control-Request-Headers, Access-Control-Request-Method and Origin) to allow HLS playback.
• Origin Access Identity – if you want download protection set to Create a New Identity.
• if you already have another CloudFront distribution which is using the same bucket, you can pick it’s Access Identity.
• Grant Read Permission on Bucket – set to Yes, Update Bucket Policy.
• Restrict Viewer Access – if you want to restrict downloading and use access keys, set this to “Yes”. 
• You can keep all the other settings unchanged. If you wish to set up your own domain name, see this part of the guide.

Then hit the Create Distribution button.

4. You will see that your distribution is being created. Select it and hit Distribution Settings to figure out what is the CloudFront domain name.


CloudFront creating in progress

5. You need to copy the Domain Name here and put it into Settings -> FV Player -> Hosting -> CloudFront (Pro) -> CloudFront domain.

   
   CloudFront general settings

   NOTE: If you already have some other domain name there, just put in a comma symbol behind it and add the new one.

   
   CloudFront settings

6. If you also want the download protection, you probably already put in the following, but it’s time to double-check:

   • CloudFront private key file (step 6. of Configuring CloudFront keys for FV Player)
   • Access Key ID (step 5. of Configuring CloudFront keys for FV Player)

7. Last thing is to go back to the CloudFront distribution settings and adjust the Behaviors. Pick your Behavior and click Edit.

   
   Adjusting CloudFront behavior

    

8. In the Behavior settings, we set it so, that the CloudFront Key Pair is required to access the files and that your user has the right permission. If you want to use some other Amazon account for the CloudFront file access, you can use the Specific Accounts option.

   You also need to allow CORS in your S3 bucket with HLS streams and then in CloudFront distribution, set the Cache Based on Selected Request Headers to Whitelist and add the options in the screenshot below.

    

   
   CloudFront Behavior settings

    

   These CloudFront configuration changes usually take a few minutes to finish, so just check the main distributions screen.

Using Your Own Domain Name

If you want to use your own domain name for the CloudFront, you have to go back to the distribution settings and edit the General properties

9. Select the General tab, then click Edit.

   
   Editing general properties in CloudFront

    

10. Now you can enter your domain which you will point to your CloudFront domain (use C Name record in your DNS Zone).

     

     

    
    CloudFront – custom domain name and SSL

     

     

    You will also need to enable the SSL – pick “Custom SSL Certificate” and enter your domain name. Hit the “Request or Import a Certificate with ACM” and you will get a new wizard, in which you need to enter that domain and use either DNS or Email validation. We recommend using the DNS validation.

    Be careful about the record value – it has to end with a dot symbol. Otherwise, your domain name might be appended to it.

    
    Domain validation in ACM

    Once the certificate is validated, you might need to start over with the custom domain setup. For “Custom SSL Client Support” pick “Only Clients that Support Server Name Indication (SNI)” as that option is sufficient. 

    The changes will take a bit of time to save. Once done, you will be able to open your files using your own domain.

Embedding Videos To Your Posts

11. Now you can embed your videos. To insert a new video click the FV Player icon and the dialogue window will appear. 

     

    
    Insert FV Player

12. Insert the video link. The link should be in form:  {something}.cloudfront.net or your mapped domain CNAME (for HTTP only, see step 10).

    
    Inserting CloudFront URL to FV Player’s shortcode editor

13. Alternatively, you can type in the shortcode like this:

    [fvplayer src="https://mydomain.cloudfront.net/Swan+Lake+Reloaded.mp4"]

Done. Now your video will be streamed via CloudFront with signed URL (download protection). The video URL visible in page’s HTML doesn’t contain the CloudFront Signature and thus, it can’t be downloaded (your video URLs are safe from simply grabbing their URL using “show page source” web browser function).

You can check a couple of example videos in this demo.

Summary – Practical example

Here are some quick ways to check, if everything is set up correctly:

1. If your CloudFront distribution d2yv7j6ywk4uii.cloudfront.net is configured to serve files from Amazon S3 bucket fv-flowplayer-cloudfront 
2. And your Amazon S3 video URL is https://s3-us-west-2.amazonaws.com/fv-flowplayer-cloudfront/Swan+Lake+Reloaded.mp4 (obtained in Uploading the files and setting their properties [step 10])
3. Then your CloudFront video URL is https://d2yv7j6ywk4uii.cloudfront.net/Swan+Lake+Reloaded.mp4
   

   If you configured the CloudFront with download restriction (Restrict Bucket Access), the file should not open when opened in your browser – just copy and paste the video link into your browser address bar and try to open it.

4. Additionally – if you also have a domain mapped to CloudFront via a C NAME record, for example video-cdn.foliovision.com, then the video URL is http://video-cdn.foliovision.com/Swan+Lake+Reloaded.mp4
5. Then you just enter it like

   [fvplayer src="http://video-cdn.foliovision.com/Swan+Lake+Reloaded.mp4"]

   or use the shortcode editor.

6. Quick check:
   1. Make sure you deselect Settings -> FV Player -> Setup -> Sitewide Flowplayer Defaults -> Disable Admin Video Checker, click Save All Changes and open your post for viewing.
   2. Look for “Checking video…” in the top left corner of the player. Does it say “Video OK”?
   3. Does the video play?