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 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

Configuring CloudFront keys for FV Player

If your videos are public and you don’t need access restrictions, you can skip the CloudFront keys 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.

   

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.



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.

2. Create a new distribution by clicking Create Distribution.

   

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



• 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 “/”.
• In S3 bucket access set Yes use OAI(bucket can restrict access to only CloudFront)
• Origin Access identity – pick or create an OAI to match your bucket. (If you already have another CloudFront distribution which is using the same bucket, you can pick it’s Access Identity.)
• Bucket policy – pick Yes, update the bucket policy.
4. Scroll down and use the following settings for Default Cache Behavior:



• Object compression is optional and only compresses HLS streams.
• For Restrict viewer access make sure to pick Yes, Trusted signer, Self. To ensure signed URLs work properly.
5. For Cache key and origin requests use the following:
   
   • Pick Legacy cache settings and make sure to include the following headers: Acess-Control-Request-Headers, Access-Control-Request-Method and Origin, to allow HLS playback.
6. You can keep all the other settings unchanged. If you wish to set up your own domain name, see this part of the guide.

7. Then hit the Create Distribution button.

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



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

   
   CloudFront settings

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

10. 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)

    • You also need to allow CORS in your S3 bucket and make sure you’ve set CloudFront behaviors correctly.

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

1. Select the General tab, then click Edit.

   

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

   

   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

Now you can embed your videos. To avoid having to input your links manually, make sure to enable the S3 browser.

1. In FV Player Editor, click Add video:



2. Once in the media library, pick the Amazon S3 tab:



The links featured in the S3 browser are automatically updated, so you do not have to worry about any changes to the links.

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.

Troubleshooting

1. If you’re facing playback issues, make sure to 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? If not, what does the checker say? If unsure, send us a report or write us an e-mail.