317 words

2 minutes

Adding Videos to a Web Page

2025-08-17

Examples

Example

/

Video

Maybe you’ve also wondered how to embed platform videos into a webpage.
Here are some methods that might help you (≧▽≦)

Methods for Embedding Video in a Web Page#

1
---
2
title: Adding Videos to a Web Page
3
published: 2025-08-17
4
---
5
Bilibili embed method
6
src="//player.bilibili.com/player.html?bvid={BV-ID}&p=page-number"
7

8
Twitter embed method
9
<blockquote class="twitter-tweet">
10
  <a href="https://twitter.com/xxx"></a>
11
</blockquote>
12
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
13

14
Other embed method
15
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube#

Bilibili#

Using Lottie to Play Animations#

Another method is to export After Effects videos as JSON files and use Lottie to implement web animations.

Project Structure#

Assume your project directory looks like this:

1
/project
2
  /static
3
    /js
4
      lottie.js
5
    /animation_web
6
      /ae_animation
7
        ae_animation.json
8
  index.html

Explanation: lottie.js: Lottie official JS library ae_animation.json: Animation file exported from AE index.html: The page file

Here’s an example code:

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <script src="static/js/lottie.js"></script>
8
    <title>lottie</title>
9
    <style>
10
        * {
11
            font-size: 2vmin;
12
            margin: 0;
13
            padding: 0;
14
        }
15
        body {
16
            display: flex;
17
            justify-content: center;
18
            align-items: center;
19
            width: 100%;
20
            height: 100vh;
21
            background-color: #f7f7f7;
22
            overflow: hidden;
23
        }
24
        #container {
25
            position: absolute;
26
            display: flex;
27
            justify-content: center;
28
            align-items: center;
29
            width: 100%;
30
            height: 100vh;
31
            background-color: #171717;
32
        }
33
        .container_hidden {
34
            transform: translateY(100%);
35
            visibility: hidden;
36
            transition: 0.8s ease;
37
        }
38
        #animation_box {
39
            position: relative;
40
            width: 50rem;
41
        }
42

43
    </style>
44
</head>
45

46
<body>
47
    <div id="container">
48
        <div id="animation_box"></div>
49
    </div>
50
</body>
51
<script>
52
    let ani = lottie.loadAnimation({
53
        container: document.getElementById("animation_box"),
54
        renderer: 'svg',
55
        loop: false,
56
        autoplay: true,
57
        path: 'your_ae_animation.json'
58
    });
59
    let readystate = 0;
60
    setTimeout(() => { readystate = 1; }, 5000);
61

62
    // Frame listener
63
    ani.addEventListener("enterFrame", () => {
64
        if (ani.currentFrame >= 65) {
65
            if (readystate != 1) { ani.goToAndPlay(0); }
66
        }
67
    });
68
    // Animation complete event
69
    ani.addEventListener("complete", () => {
70
        document.getElementById("container").classList.add("container_hidden");
71
    });
72
</script>
73
</html>

Conclusion#

That’s the tutorial on using Lottie to create web animations,
as well as embedding videos with iframe.

Here are more resources on Lottie compatibility and extensions:

Adding Videos to a Web Page

https://blog.mazumi.asia/posts/video/

Author

Mzuki

Published at

2025-08-17

License

CC BY-NC-SA 4.0

Markdown Tutorial

Markdown Example

welcome!