|
<!doctype html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
</head> |
|
|
|
<body> |
|
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6"> |
|
<div class="flex items-center flex-shrink-0 text-white mr-6"> |
|
<span class="font-semibold text-xl tracking-tight">YouTube見れちゃう.com</span> |
|
</div> |
|
</nav> |
|
<div class="grid gap-6 mb-6 mx-4 my-4"> |
|
<div> |
|
<label for="video_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">ID</label> |
|
<input type="text" id="video_id" |
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" |
|
placeholder="XXXXXXX" required> |
|
</div> |
|
<iframe width="800" height="450" src="https://www.youtube-nocookie.com/embed/59IcdfZlbPQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> |
|
</div> |
|
<script> |
|
|
|
document.getElementById("video_id").addEventListener("change", function() { |
|
document.getElementsByTagName("iframe")[0].src = "https://www.youtube-nocookie.com/embed/" + this.value; |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |
