heroku+bottleを利用して、遷移ができて動画再生できるWebを公開したい

HerokuにWebを公開したいと考えています。複数ページに遷移する形を取ろうとしているのですが、良い方法をご教示願えたらと思います。
現状、pythonのbottleを使えば行けるのかな…と考えているのですがこの部分も怪しい所です。

構成

・root.py
・composer.json
・index.php・
・views/
    - title.html
    - menu.html
    - video.html
    - video.mp4

root
1import os
2from bottle import route, run, TEMPLATE_PATH, template
3
4# 最初にtitle.htmlが表示されるようにしたい
5@route("/title")
6def index():
7    return template("title")
8
9
10run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))

indexphp
1<?php include_once("./views/title.html"); ?>

title
1<!DOCTYPE HTML>
2<html>
3	<head>
4		<meta charset = "utf-8">
5		<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
6	</head>
7	<body>
8		<center>
9			<p class="title">Title</p>
10			<br>
11            <!-- このa href部分でmenu.htmlに遷移したい。bottonに置き換える実装でもいい。 --> 
12			<a href="../views/menu.html" class="btn btn-svg" target="_blank" rel="noopener noreferrer" onClick="window.close();">
13				<svg>
14					<rect x="102" y="2" rx="0" fill="none" width=200 height="50"></rect>
15				</svg>
16			  	<span>Go Menu</span>
17			</a>
18		</center>
19	</body>
20</html>

menu.htmlは同様にvideo.htmlに遷移する画面である。

video.htmlではHTML5にあるvideoタグを利用してvideo.mp4を流したい。

video
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5	</head>
6	<body>
7		<p class="description">※動画視聴用。</p>
8		<table>
9			<tr>
10				<td>
11				    <video id="video" height="480">
12　　　　　　　　　　　　　　<!-- ここでvideo.mp4を読み込む。Herokuでは動作しない。-->
13				        <source src="../views/video.mp4">
14				    </video>
15				</td>
16				<td>
17				    <div>
18				        <input type="button" value="再生" onClick="playVideo(), style.display='none'"">
19					<span id="message"></span>
20				    </div>
21				</td>
22			</tr>
23		</table>
24		<script>
25		    var v;
26
27		    function init_video(){
28		        v = document.getElementById("video");
29
30		        v.onloadeddata = function()
31		        {
32		            document.getElementById("length").innerHTML = v.duration;
33		        }
34
35		        v.addEventListener("timeupdate", function(){
36		            document.getElementById("position").innerHTML = v.currentTime;
37		            document.getElementById("speed").innerHTML = v.playbackRate.toFixed(1);
38		        }, false);
39
40		        v.addEventListener("ended", function(){
41		            document.getElementById("message").innerHTML = "finished";
42		        }, false);
43
44		        v.addEventListener("pause", function(){
45		            document.getElementById("message").innerHTML = "paused";
46		        },false);
47		    }
48
49		    function playVideo() {
50		        document.getElementById("message").innerHTML = "playing..";
51		        v.play();
52
53		    }
54
55		    function pauseVideo() {
56		        v.pause();
57		    }
58
59		    function changeVolume( val ) {
60		        v.volume += val;
61		        document.getElementById("volume").innerHTML = v.volume.toFixed(1);
62		    }
63
64		    function setVolume( val ){
65		        v.volume = val;
66		    }
67
68		    function seekUp() {
69		        v.currentTime += 1;
70		    }
71
72		    function seekDown() {
73		        v.currentTime -= 1;
74		    }
75
76		    function seekToTop(){
77		        v.currentTime = 0;
78		    }
79
80		    function seekToLast(){
81		        v.currentTime = v.duration;
82		    }
83
84		    function slow() {
85		        v.playbackRate += 0.1;
86		    }
87
88		    function setSpeed( speed ) {
89		        if ( speed < 0.1 ){
90		            speed = 0.1;
91		        }
92		        v.playbackRate = speed;
93		    }
94
95		    function fast() {
96		        if ( v.playbackRate > 0.1){
97		            v.playbackRate -= 0.1;
98		        }
99		    }
100		    init_video();
101		</script>
102	</body>
103</html>

もしもbottle以外で遷移可能ならそれを利用してもかまわない。ページ遷移で前ページの情報の遷移は行われないものとする。
必要な最低限の機能は、
「title->menu menu->videoのhtmlの遷移が可能である」　「video.htmlではvideo.mp4を読み込める」
の2つである。

githubに上げていて、Herokuでこれを自動deployするようにしている。
ご回答のほどよろしくお願いいたします。