Here’s a step-by-step HTML tutorial for embedding Hailuo AI videos on a WordPress website

Objective:

We will use the Hailuo AI platform to embed videos directly on your WordPress website by adding HTML code to WordPress.

Step 1: Sign Up and Upload Videos to Hailuo AI

Go to Hailuo AI.
Sign up or log in to your account.
Once logged in, upload your video or create one using Hailuo AI’s video generation tools.
After the video is uploaded and processed, you’ll have a video URL or embed code.

Step 2: Retrieve the Embed Code or Video URL

Once your video is ready, navigate to the video details page.
Look for the “Embed” or “Share” option.
Copy the HTML embed code or the direct video URL.

Step 3: Embed the Video on WordPress

Option 1: Using the WordPress Block Editor (Gutenberg)

Open your WordPress dashboard.
Create a new post or edit an existing post/page where you want the video.
In the block editor:
- Click on the “+” button to add a new block.
- Search for the “Custom HTML” block.
- Paste the embed code or use an <iframe> with the direct video URL. Example:
html

<iframe src="https://hailuoai.com/video/your-video-id" width="640" height="360" frameborder="0" allowfullscreen></iframe>
Preview the post to ensure the video appears correctly.

Option 2: Using the Classic Editor

Switch to the classic editor or use the “Text” tab in the editor.
Paste the HTML embed code into the content editor:

html

<iframe src="https://hailuoai.com/video/your-video-id" width="640" height="360" frameborder="0" allowfullscreen></iframe>
Save or publish your post/page to see the embedded video live.

Step 4: Customize the Embed (Optional)

Adjust width and height by modifying the width and height attributes in the iframe code.
Add custom styling or use a container <div> to center the video or modify margins.

Example of a centered video:

html

<div style="text-align: center;">

   <iframe src="https://hailuoai.com/video/your-video-id" width="640" height="360" frameborder="0" allowfullscreen></iframe>

</div>

Step 5: Final Preview and Publish

After adding the embed code, preview your post to ensure the video displays correctly.
Once satisfied, publish the post.

Conclusion:

Embedding videos from Hailuo AI into WordPress is easy and only requires using the provided embed code in the appropriate section of your website. You can customize the size and positioning of the video to suit your needs.

Let me know if you need help with anything else!

Visited 21 times, 1 visit(s) today