DjangoのサイトにYouTubeを埋め込んでみた

今回はこの前作成したくじ引きサイトの使い方を動画にし、YouTubeにアップロードしたので、その動画をサイトに埋め込みました。

その方法を書いていこうと思います。

以前作成したくじ引きアプリの記事は以下になります。

Djangoでくじ引きアプリを作ってみる_part14

【参考サイト】

http://www.tohoho-web.com/bootstrap/embed.html

【手順】

まずは、YouTubeに動画をアップロードします。

その後、共有＞埋め込む＞コードを選びコピーします。

<iframe width="560" height="315" src="https://www.youtube.com/embed/rXVlRwXytHE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このままだと、動画の枠がレスポンシブ対応していないため、レスポンシブ対応にします。以下のように変更します。

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/rXVlRwXytHE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

このコードをくじ引きサイトのテンプレートに埋め込みます。

ファイル：myapptdl>tdl>templates>tdl>tdl_list.html

コード：

{% extends 'layout.html' %}
{% block content %}
    <h1>くじ引き内容</h1>

{% if user.is_authenticated %}
        <table class='table table-striped table-hover'>
            <tr>
                <th>内容</th><th>編集</th><th>削除</th>
            </tr>
            {% for tdl in object_list%}
            <tr>
                <td> {{ tdl.item }}</td>
                <td> <a href='{% url "tdl:update" tdl.id %}'>編集</a> </td>
                <td> <a href='{% url "tdl:delete" tdl.id %}'>削除</a> </td>
            </tr>
            {% endfor %}
        </table>
            <div>
                <a href='{% url "tdl:create" %}' class="btn btn-primary">新規作成</a>
                <a href='{% url "tdl:execution" %}' class="btn btn-secondary">実行</a>
            </div>
{% else %}
    <div class = "text-dark">このサイトはくじ引きする内容を自分で作成して、自分でくじをするサイトです。<br>
        まずは、「Sign up」より自分のログインIDを作成してください。<br>
        くじ引きの内容は作成者本人以外は見れないようになっています。
    </div>
    <br>
    <table class='table table-striped table-hover'>
        <tr>
            <th>内容</th>
        </tr>
        <tr>
            <td>サンプル1</td>
        </tr>
        <tr>
            <td>サンプル2</td>
        </tr>
    </table>

#以下を追加----------
 <br>
 <h3>くじ引きアプリの使い方</h3>

 <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rXVlRwXytHE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>

#ここまで------------

{% endif %}

{% endblock %}

以上で設定は終わりです。

次はHerokuにデプロイして確認してみます。

git add .
git commit -m .
git push heroku master

 

以上で終わりです。ありがとうございました。