ConvertedU Marketing Library Webinar Blog

Need help? You've come to the right place

What's New Getting Started Drag and Drop Standard Builder Integrations Center

How to Embed Amazon S3 Video Links into an iframe

Step 1: Log into your Amazon S3 Console by visiting https://console.aws.amazon.com/.

 Once in, under Storage & Content Delivery, select "S3."

 

Step 2: Create a Bucket. If you already have one, proceed to the next step.

Now it's time to create a Bucket. If you already have one, please proceed to the next step.

To create a Bucket, simply click "Create Bucket."

 

Step 3: In the prompt that appears, name your bucket and then click “Create.”

 

Once you've chosen a name, write it down. This is important, as we'll be using it later on!

 

Step 4: After creating your bucket, select it from the menu.

After creating your Bucket, select it from the menu.

 

Step 5: Upload your video by selecting the “Upload” button in the top-left corner.

Upload your Video by selecting the Upload button in the top left corner.

 

Step 6: Select you video by clicking “Add File.” Then, choose “Start Upload.”


 

Step 7: Select your Video File, then click “Properties.”

 

Step 8: Inside of Properties, select “Metadata.”

 

 

Step 9: In Metadata, change the value to video/[your video extension].

Please note: The extension you enter must correspond with the one shown at the end of your video link.

In this example, an MP4 video file is used. If you upload a MOV, AVI, or any other video type, be sure to place that extension after video/ in the value field. 

Once your changes have been made, click Save.

 

Step 10: Generate a Bucket Policy in order to grant streaming access to this file.

To do this, visit http://awspolicygen.s3.amazonaws.com/policygen.html.

 

Step 11: Inside of the Policy Generator, select “S3 Bucket Policy” as the policy type.

 

Step 12: Next to “Effect,” select “Allow.” Then, place an asterisk in the “Principal” field.  

 

Step 13: In the Actions dropdown menu, select “GetObject.”

Step 14: Enter your Amazon Resource Name (ARN).

Next, you must enter your Amazon Resource Name (ARN).

Your Amazon Resource Name (ARN) will look like this:

arn:aws:s3:::<bucket_name>/<key_name>

Replace Bucket name with the name you'd selected earlier on in the tutorial, followed by a backslash and an asterisk.

At the beginning of this tutorial, I'd named by Bucket testestlp1. Therefore, my ARN is:

arn:aws:s3:::testestlp1/*

Once this step is completed, choose "Add Statement".

 

Step 15: After your Statement appears below, select “Generate Policy.”

 

Step 16: Copy all the text from the text box that appears, then click “Close.”

Step 17: Navigate back to https://console.aws.amazon.com.

Step 18: Once you're back to your Bucket list, follow the steps below.

a. Select your Bucket from the list.

b. Click the “Properties” button.

c. In the Properties panel, select “Permissions.”

d. Permission options will expand below it. Select “Add Bucket Policy.”

 

Step 19: Paste the Policy Code copied to your clipboard in the text box that appears, then click Save.

Paste the Policy Code copied to your clipboard in the text box that appears, then click Save.

 

Step 20: Select your Bucket from the Bucket list, then select your video file.

Select your Bucket from the Bucket list, then select your video file.

Once your video file is selected, choose "Properties" to the right. There you will find your video's URL.
 

Step 21: Add the iframe code to your Leadpage.

You can then add it to the iframe code on your Leadpages template.

You can find the iframe code below. Be sure to adjust the WIDTH HERE and HEIGHT HERE values to correspond with the recommended dimensions shown on your template's video box.

<iframe width="WIDTH HERE" height="HEIGHT HERE" src="YOUR URL HERE" frameborder="0" allowfullscreen></iframe>

Please note that the video dimensions will be displayed based on the dimensions at which it was rendered. Therefore, if it's smaller than the dimensions of the video placeholder, a black border will appear around it. For best results, render your video file at a larger resolution.

 

(Updated 5/19/2016)


Please let us know if you have additional questions.

You can always file a support ticket if you have additional questions by clicking the Support button in your dashboard shown here or clicking here to file a support ticket.

Was this article helpful?
7 out of 7 found this helpful
Powered by Zendesk