particles.jpが映りません

前提

Youtubeの「【HTML/CSS】実践！Webサイト作成から公開までの過程を解説！」をまねしています。

実現したいこと

・particle.jpを反映したいです。

発生している問題・エラーメッセージ

PCの幅だと白く表示されてしまい、幅を狭めると文字も途中まで映ります。

×の○マーク
Failed to load resource: the server responded with a status of 404 (Not Found)　favicon.ico:1

×のコメントマーク
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.
12 cookies

試したこと

セイト先生と同じようにapp.jpのコードは直しました。

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/js/particles.json', function() {
    console.log('callback - particles.js config loaded');
  });

補足情報（FW/ツールのバージョンなど）

index.htmlのコードです。

html
1<body>
2   
3  <div class="ocean">
4    <strong>Hello World!</strong>
5    <div class="ocean-particls" id="particles-js"></div>
6    <video autoplay loop muted preload>
7      <source src="./assets/videos/ocean.mp4" type="video/mp4">
8
9      
10    </video>
11
12  </div>
13 
14 <section class="section">
15    <h1 class="section-headline">About</h1>
16    <figure class="about">
17        <img class="about-image" src="https://dummyimage.com/600x400/000/fff" alt="About-image">
18        <figcaption class="about-caption">
19          <h2 class="about-headline">What can we do?</h2>
20          <p class="about-description">
21            Text text text  text text text text text text text text 
22            <br/>
23            text text text text text text text text text text text 
24          </p>
25        </figcaption>  
26    </figure>
27 </section>
28
29 <section class="section-secondary">
30  <h1 class="section-headline">Feature</h1>
31  </section>
32
33  <ul class="grid grid-col-4">
34    <li class="grid-item">
35       <dl class="feature">
36          <dt class="feature-headline"> 1. Great Service</dt>
37          <dd class="feature-img">
38            <img src="./assets/images/001-layout.png" alt="Great Service">
39          </dd>
40          <dd class="feature-description">Text text  text text text text text text text text</dd>
41       </dl>
42    </li>
43
44 
45    <li class="grid-item">
46      <dl class="feature">
47         <dt class="feature-headline">>2. High Performance/</dt>
48         <dd class="feature-img">
49           <img src="./assets/images/002-settings.png" alt="High Performance">
50          </dd>
51          <dd class="feature-description">Text text  text text text text text text text text</dd>
52      </dl>   
53    </li>
54 
55    <li class="grid-item">
56      <dl class="feature">
57        <dt class="feature-headline">3. Strong Responsibility</dt>
58        <dd class="feature-img">
59          <img src="./assets/images/003-jigsaw.png" alt="3. Strong Responsibility">
60        </dd> 
61        <dd class="feature-description">Text text  text text text text text text text text</dd>
62      </dl>  
63   
64 
65 
66 
67 
68    <li class="grid-item">
69      <dl class="feature">
70        <dt class="feature-headline">4. Excellent Technology</dt>
71        <dd class="feature-img">
72          <img src="./assets/images/004-product.png" alt="Excellent Technology">
73        </dd>
74        <dd class="feature-description">Text text  text text text text text text text text</dd>
75      </dl>  
76    </li>
77  </ul>
78 
79
80    <script src="./assets/js/particles.min.js"></script>    
81    <script src="./assets/js/app.js"></script>
82</body>
83</html>
84
85
86```CSSの該当箇所
87
88/* 
89ocean
90 */
91
92.ocean {
93    width: 100vw;
94    height: 100vh;
95    position: relative;
96    overflow: hidden;
97}
98
99.ocean > strong {
100    position: absolute;
101    top: 50%;
102    left: 50%;
103    z-index: 3;
104    transform: translate(-50%, -50%);
105    font-size: 120px;
106    color: #fff;
107    font-weight: bold;
108    display: block;
109    width: 100%;
110    text-align: center;
111
112}
113
114.ocean > video {
115    z-index: 1;
116    position: absolute;
117    width: auto;
118    height: 100%;
119}
120
121.ocean-particles {
122    position: absolute;
123    z-index: 2;
124    width: 100%;
125    height: 100%;
126}
127

/*
ocean
*/

.ocean {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}

.ocean > strong {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
font-size: 120px;
color: #fff;
font-weight: bold;
display: block;
width: 100%;
text-align: center;