{"id":25666,"date":"2024-11-20T12:36:01","date_gmt":"2024-11-20T03:36:01","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25666"},"modified":"2024-11-20T12:36:03","modified_gmt":"2024-11-20T03:36:03","slug":"youtube%e9%a2%a8%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25666","title":{"rendered":"Youtube\u98a8\u30b5\u30a4\u30c8"},"content":{"rendered":"
\n<!DOCTYPE html>\n<html lang="ja">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>MyTube - \u52d5\u753b\u5171\u6709\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0<\/title>\n    <style>\n        \/* \u5171\u901a\u30b9\u30bf\u30a4\u30eb *\/\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n            background-color: #f9f9f9;\n        }\n        header {\n            background-color: #ff0000;\n            color: white;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 10px 20px;\n        }\n        header .logo {\n            font-size: 24px;\n            cursor: pointer;\n        }\n        header .search-bar input {\n            width: 300px;\n            padding: 8px;\n            border: none;\n            border-radius: 4px;\n        }\n        header .search-bar button {\n            padding: 8px 12px;\n            margin-left: 5px;\n            background-color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n        }\n        header .user-menu img {\n            border-radius: 50%;\n        }\n        nav {\n            background-color: #333;\n            color: white;\n            padding: 10px;\n        }\n        nav ul {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n            display: flex;\n            justify-content: center;\n        }\n        nav ul li {\n            margin: 0 15px;\n        }\n        nav ul li a {\n            text-decoration: none;\n            color: white;\n        }\n        main {\n            padding: 20px;\n        }\n        .video-grid {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n        }\n        .video-card {\n            background-color: white;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n            margin: 15px;\n            overflow: hidden;\n            width: 320px;\n        }\n        .video-card img {\n            width: 100%;\n        }\n        .video-card h3, .video-card p {\n            margin: 10px;\n        }\n        .video-player-page {\n            display: none;\n        }\n        .video-player {\n            max-width: 800px;\n            margin: 0 auto;\n        }\n        .video-player video {\n            width: 100%;\n            margin-bottom: 10px;\n        }\n        .recommendations ul {\n            list-style: none;\n            padding: 0;\n        }\n        .recommendations ul li {\n            display: flex;\n            margin-bottom: 10px;\n        }\n        .recommendations ul li img {\n            margin-right: 10px;\n            border-radius: 4px;\n        }\n        .comments textarea {\n            width: 100%;\n            height: 100px;\n            margin-bottom: 10px;\n            padding: 10px;\n        }\n        .comments button {\n            padding: 10px 15px;\n            background-color: #ff0000;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n        }\n        footer {\n            background-color: #333;\n            color: white;\n            text-align: center;\n            padding: 20px 0;\n            margin-top: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- \u30d8\u30c3\u30c0\u30fc -->\n    <header>\n        <div class="logo" onclick="showPage('home')">MyTube<\/div>\n        <div class="search-bar">\n            <input type="text" placeholder="\u52d5\u753b\u3092\u691c\u7d22">\n            <button>\u691c\u7d22<\/button>\n        <\/div>\n        <div class="user-menu">\n            <img src="https:\/\/via.placeholder.com\/40" alt="\u30e6\u30fc\u30b6\u30fc\u30a2\u30a4\u30b3\u30f3">\n        <\/div>\n    <\/header>\n    <nav>\n        <ul>\n            <li><a href="#" onclick="showPage('home')">\u30db\u30fc\u30e0<\/a><\/li>\n            <li><a href="#">\u30c8\u30ec\u30f3\u30c9<\/a><\/li>\n            <li><a href="#">\u97f3\u697d<\/a><\/li>\n            <li><a href="#">\u30b2\u30fc\u30e0<\/a><\/li>\n            <li><a href="#">\u30cb\u30e5\u30fc\u30b9<\/a><\/li>\n        <\/ul>\n    <\/nav>\n    \n    <!-- \u30db\u30fc\u30e0\u30da\u30fc\u30b8 -->\n    <main class="video-grid" id="home-page">\n        <article class="video-card" onclick="showPage('video-player')">\n            <img src="https:\/\/via.placeholder.com\/320x180" alt="Video Thumbnail">\n            <h3>\u52d5\u753b\u30bf\u30a4\u30c8\u30eb1<\/h3>\n            <p>\u30c1\u30e3\u30f3\u30cd\u30eb\u540d: \u30e6\u30fc\u30b6\u30fcA<\/p>\n            <p>\u518d\u751f\u56de\u6570: 10,000\u56de<\/p>\n        <\/article>\n        <article class="video-card" onclick="showPage('video-player')">\n            <img src="https:\/\/via.placeholder.com\/320x180" alt="Video Thumbnail">\n            <h3>\u52d5\u753b\u30bf\u30a4\u30c8\u30eb2<\/h3>\n            <p>\u30c1\u30e3\u30f3\u30cd\u30eb\u540d: \u30e6\u30fc\u30b6\u30fcB<\/p>\n            <p>\u518d\u751f\u56de\u6570: 8,500\u56de<\/p>\n        <\/article>\n    <\/main>\n\n    <!-- \u52d5\u753b\u518d\u751f\u30da\u30fc\u30b8 -->\n    <main class="video-player-page" id="video-player-page">\n        <section class="video-player">\n            <video controls>\n                <source src="sample-video.mp4" type="video\/mp4">\n                \u304a\u4f7f\u3044\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u306f\u52d5\u753b\u3092\u518d\u751f\u3067\u304d\u307e\u305b\u3093\u3002\n            <\/video>\n            <h1>\u52d5\u753b\u30bf\u30a4\u30c8\u30eb1<\/h1>\n            <p>\u518d\u751f\u56de\u6570: 10,000\u56de | \u6295\u7a3f\u65e5: 2024\u5e7411\u670819\u65e5<\/p>\n            <p>\u30c1\u30e3\u30f3\u30cd\u30eb\u540d: \u30e6\u30fc\u30b6\u30fcA<\/p>\n            <p>\u52d5\u753b\u306e\u8aac\u660e\u6587: \u3053\u308c\u306f\u52d5\u753b\u306e\u8aac\u660e\u6587\u3067\u3059\u3002\u6982\u8981\u3084\u30ea\u30f3\u30af\u3001\u95a2\u9023\u60c5\u5831\u3092\u3053\u3053\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n        <\/section>\n        <aside class="recommendations">\n            <h2>\u304a\u3059\u3059\u3081\u52d5\u753b<\/h2>\n            <ul>\n                <li>\n                    <a href="#" onclick="showPage('video-player')">\n                        <img src="https:\/\/via.placeholder.com\/150x100" alt="Video Thumbnail">\n                        <p>\u52d5\u753b\u30bf\u30a4\u30c8\u30eb2<\/p>\n                    <\/a>\n                <\/li>\n            <\/ul>\n        <\/aside>\n        <section class="comments">\n            <h2>\u30b3\u30e1\u30f3\u30c8<\/h2>\n            <form>\n                <textarea placeholder="\u30b3\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0"><\/textarea>\n                <button>\u9001\u4fe1<\/button>\n            <\/form>\n            <ul>\n                <li>\u30e6\u30fc\u30b6\u30fcA: \u7d20\u6674\u3089\u3057\u3044\u52d5\u753b\u3067\u3059\uff01<\/li>\n                <li>\u30e6\u30fc\u30b6\u30fcB: \u3082\u3063\u3068\u898b\u305f\u3044\uff01<\/li>\n            <\/ul>\n        <\/section>\n    <\/main>\n\n    <footer>\n        <p>\u00a9 2024 MyTube - \u52d5\u753b\u5171\u6709\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0<\/p>\n    <\/footer>\n\n    <script>\n        function showPage(page) {\n            document.getElementById('home-page').style.display = page === 'home' ? 'block' : 'none';\n            document.getElementById('video-player-page').style.display = page === 'video-player' ? 'block' : 'none';\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[80],"tags":[3],"class_list":["post-25666","post","type-post","status-publish","format-standard","hentry","category-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25666"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25666\/revisions"}],"predecessor-version":[{"id":25668,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25666\/revisions\/25668"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25666"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}