Embedding Video in GCP

#GCP #tutorial

Step 1: Create a Storage Bucket

  1. Go to the Google Cloud Console: Navigate to the Google Cloud Console.

  2. Select your project: Make sure you have selected the project you created for managing videos.

  3. Navigate to Storage: In the navigation menu, look for "Storage" under the "Storage" section or use the search bar at the top to search for "Storage".

  4. Create a bucket: Click on the "Create bucket" button to start the bucket creation process.

    • Name your bucket: Bucket names must be globally unique.
    • Choose where to store your data: Select a location type and specific location based on your needs for latency, availability, and cost.
    • Configure your bucket: Choose the default storage class and access control model. For video files that will be publicly accessible, you might choose "Standard" storage class and "Fine-grained" access control for public.
    • Create: Click "Create" to create your bucket.

Step 2: Upload Videos to Your Bucket

After creating your bucket, you can upload files to it.

  1. Open your bucket: From the "Storage" section in the Google Cloud Console, click on the bucket you created.

  2. Upload files: Click on the "Upload files" button.

    • You can select files from your computer to upload. Navigate to the location of your video files, select them, and click "Open" to start the upload.
    • You can also drag and drop files directly into the browser window if you're in the correct bucket view.

Step 3: Set Public Access (If Needed)

If you want your videos to be publicly accessible (for embedding on websites or direct access), you'll need to adjust the permissions.

  1. Select the uploaded file: In the bucket's file list, click on the filename of the video you uploaded.

  2. Change access: Click on the "Permissions" tab.

    • Click on "Add members".
    • In the "New members" field, enter allUsers.
    • In the "Select a role" drop-down, choose "Cloud Storage" > "Storage Object Viewer".
    • Click "Save".

This makes the file publicly accessible, and you'll be able to use the file's URL for embedding or direct access. The URL format will be like this: https://storage.googleapis.com/[YOUR_BUCKET_NAME]/[YOUR_VIDEO_FILE_NAME].

Step 4: iframe code for embedding

In the markdown or HTML file you can use autoplay and loop options to make your video works like loop diagram.

<video src="https://storage.googleapis.com/video_for_notebook/test.mov" controls autoplay loop muted></video>

To change the size of the video and align it within your content (such as centering or aligning it to the right), you will need to apply some additional attributes and possibly some CSS. Here's how you can do it:

Changing the Size of the Video

You can directly set the width and height attributes in the <video> tag to change the size of the video. For example, to set the video to a width of 480 pixels and a height that maintains the aspect ratio, you can do:

<video src="https://storage.googleapis.com/video_for_notebook/test.mov" controls autoplay loop muted width="480"></video>

If you want to specify both width and height, you can do so, but be aware that this might distort the video if the aspect ratio doesn't match:

<video src="https://storage.googleapis.com/video_for_notebook/test.mov" controls autoplay loop muted width="480" height="270"></video>

Centering the Video

To center the video, you can use CSS. The most straightforward way to center the video in its container is to apply display: block; and margin: auto; to the <video> tag. Since Markdown does not directly support inline styles, you might need to add a style block in your HTML header or an external stylesheet. However, for demonstration, here's how you could theoretically apply it inline:

<video src="https://storage.googleapis.com/video_for_notebook/test.mov" controls autoplay loop muted width="480" style="display: block; margin: auto;"></video>

Aligning the Video to the Right

Aligning the video to the right can also be done with CSS. You can use float: right; or margin-left: auto; and display: block; depending on your layout needs:

<video src="https://storage.googleapis.com/video_for_notebook/test.mov" controls autoplay loop muted width="480" style="display: block; margin-left: auto;"></video>

This will push the video to the right side of its container.