クラウドサービスに投稿した動画を画面に表示させる方法がわかりません。

今下記のＷＥＢサイトのチュートリアルを試してみています。
https://scotch.io/tutorials/build-a-mini-netflix-with-react-in-10-minutes

この中で、Cloudinaryというクラウドサービスにアップロードした動画を下記のように見れるようにしたいと思っています。（下記の動画は自分がアップロードしたものではなく、チュートリアルの製作者がアップロードしたもの）

そこでいくつかアップロードしてみたのですが、下のように、なにも出てこなくなってしまいました。

変更点としては下記Display.js内のCloudNameという部分を変更したのですが、うまく行きません。どこを変更すれば良いかご教授いただけると幸いです。よろしくお願いいたします。

Display.js
1import React, { Component } from 'react';
2import { Link } from 'react-router';
3import Nav from './Nav';
4import { isLoggedIn } from '../utils/AuthService';
5import { CloudinaryContext, Transformation, Video } from 'cloudinary-react';
6import axios from 'axios';
7import { Share } from 'react-twitter-widgets'
8
9class Display extends Component {
10
11  state = { videos: [] };
12
13  getVideos() {
14    axios.get('http://res.cloudinary.com/dh989wq7m/video/list/miniflix.json')
15          .then(res => {
16            console.log(res.data.resources);
17            this.setState({ videos: res.data.resources});
18    });
19  }
20
21  componentDidMount() {
22    this.getVideos();
23  }
24
25  render() {
26
27    const { videos }  = this.state;
28
29    return (
30      <div>
31        <Nav />
32        <h3 className="text-center"> Latest Videos on Miniflix </h3>
33        <hr/>
34
35        <div className="col-sm-12">
36          <CloudinaryContext cloudName="CloudName">
37            { videos.map((data, index) => (
38                <div className="col-sm-4" key={index}>
39                  <div className="embed-responsive embed-responsive-4by3">
40                    <Video publicId={data.public_id} width="300" height="300" controls>
41                    </Video>
42                  </div>
43                  <div> Created at {data.created_at} </div>
44            <Share url={`http://res.cloudinary.com/CloudName/video/upload/${data.public_id}.mp4`} />
45                </div>
46              ))
47            }
48          </CloudinaryContext>
49        </div>
50      </div>
51    );
52  }
53}
54
55export default Display;
56

また質問内容至らない点などあれば教えていただけると嬉しいです。

HayatoKamono

2018/05/25 11:18 編集

「下のように、なにも出てこなくなってしまいました。」とありますが、これは前は表示されていたのに、それが表示されなくなったという意味として捉えてOKでしょうか？また、リンク先チュートリアルのどこまでは出来ている（動作確認が出来ている、アップロードした動画の存在確認かわ出来ている）など、質問の前提となる情報も追記してください。それに加えて、エラーが出ているのであれば、エラー文を省略せずにそのまま追記してください。最後に、ご自身でデバッグをした結果を追記し共有してください。

HayatoKamono

2018/05/25 11:22 編集

「質問内容至らない点などあれば教えていただけると嬉しいです。」に関しては、「質問のヒント」を参照して全体的に質問を補足してください。https://teratail.com/help/question-tips

hajime-nagasaka

2018/05/29 05:54

説明不足失礼致しました。まずはチュートリアルどおりにやってもアップロードした動画がうまく行きませんでした。そこで、自分のCloudNameにさし換えればうまくいくと思い、書き換えたところ、アップロードした動画は表示されず、下記のような画像になってしまったということです。チュートリアルの中でのアップロードした動画が、クラウドに保存されているというのは確認しており、WEBアプリの動作確認もできております。基本的にチュートリアルにある項目はすべてできており、エラー文も出ておらず問題としては「アップロードした動画が、表示されない」という問題のみがあります。