{"id":373,"date":"2025-11-27T20:06:27","date_gmt":"2025-11-27T12:06:27","guid":{"rendered":"https:\/\/www.jhcis.idv.tw\/jan\/?page_id=373"},"modified":"2025-11-28T20:42:42","modified_gmt":"2025-11-28T12:42:42","slug":"%e7%b7%9a%e4%b8%8a%e9%9b%bb%e8%a6%96","status":"publish","type":"page","link":"https:\/\/www.jhcis.idv.tw\/jan\/?page_id=373","title":{"rendered":"\u7dda\u4e0a\u96fb\u8996"},"content":{"rendered":"\n<style>\n\/* -------------------------------------- *\/\n\/* --- \u97ff\u61c9\u5f0f\u5bb9\u5668\u6a23\u5f0f --- *\/\n\/* -------------------------------------- *\/\n.responsive-iframe-container {\n    position: relative; \/* \u7528\u65bc\u5b9a\u4f4d\u5168\u87a2\u5e55\u6309\u9215 *\/\n    width: 100%;\n    \/* \u8a2d\u5b9a 16:9 \u6bd4\u4f8b\u7684\u5bb9\u5668 (\u5982\u679c\u9700\u8981\uff0c\u53ef\u53d6\u6d88\u8a3b\u91cb) *\/\n    \/* padding-bottom: 56.25%; *\/ \n    height: 300px; \/* \u7bc4\u4f8b\u9ad8\u5ea6 *\/\n    max-width: 500px; \/* \u7bc4\u4f8b\u6700\u5927\u5bec\u5ea6 *\/\n    margin: 0 auto;\n    background-color: #000;\n}\n\n.responsive-iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n}\n\n\/* \u5168\u87a2\u5e55\u6309\u9215\u6a23\u5f0f *\/\n#fullscreen-btn {\n    position: absolute;\n    bottom: 10px;\n    right: 10px;\n    z-index: 10;\n    background-color: rgba(0, 0, 0, 0.5);\n    color: white;\n    border: 1px solid white;\n    padding: 5px 10px;\n    cursor: pointer;\n    border-radius: 4px;\n    font-size: 14px;\n    transition: background-color 0.2s;\n}\n\n#fullscreen-btn:hover {\n    background-color: rgba(0, 0, 0, 0.8);\n}\n\n\/* -------------------------------------- *\/\n\/* --- \u5c08\u9580\u8655\u7406\u5168\u87a2\u5e55\u72c0\u614b\u4e0b\u7684\u6a23\u5f0f (\u53ea\u91dd\u5c0d\u5bb9\u5668\u672c\u8eab) --- *\/\n\/* -------------------------------------- *\/\n\n\/* \u91dd\u5c0d\u9032\u5165\u5168\u87a2\u5e55\u72c0\u614b\u7684\u5bb9\u5668 (\u4f7f\u7528 id=\"iframe-wrapper\" \u4f5c\u70ba\u76ee\u6a19) *\/\n#iframe-wrapper:fullscreen, \n#iframe-wrapper:-webkit-full-screen, \n#iframe-wrapper:-moz-full-screen, \n#iframe-wrapper:-ms-fullscreen {\n    \/* \u78ba\u4fdd\u5bb9\u5668\u5728\u5168\u87a2\u5e55\u6642\u80fd\u586b\u6eff\u6574\u500b\u87a2\u5e55 *\/\n    width: 100% !important;\n    height: 100% !important;\n    \/* \u5982\u679c\u539f\u672c\u6709\u8a2d\u5b9a padding-bottom \u4f86\u7dad\u6301\u6bd4\u4f8b\uff0c\u5168\u87a2\u5e55\u6642\u8981\u53d6\u6d88 *\/\n    padding-bottom: 0 !important;\n    background-color: black;\n}\n\n\/* \u79fb\u9664\u91dd\u5c0d iframe \u5728\u5168\u87a2\u5e55\u72c0\u614b\u4e0b\u7684\u7279\u6b8a\u6a23\u5f0f (\u4fdd\u6301\u5167\u570d\u53d6\u6d88\u7684\u539f\u5247) *\/\n\/* **\u6ce8\u610f:** \u9019\u88e1\u6c92\u6709\u91dd\u5c0d `iframe` \u7684\u5168\u87a2\u5e55\u6a23\u5f0f\uff0c\u56e0\u70ba\u5b83\u5df2\u7d93\u5728 `responsive-iframe-container iframe` \u4e2d\u8a2d\u5b9a\u70ba 100% \u5bec\u9ad8 *\/\n\n\/* \u5728\u5168\u87a2\u5e55\u6a21\u5f0f\u4e0b\uff0c\u5c07\u5168\u87a2\u5e55\u6309\u9215\u96b1\u85cf *\/\n#iframe-wrapper:fullscreen #fullscreen-btn, \n#iframe-wrapper:-webkit-full-screen #fullscreen-btn, \n#iframe-wrapper:-moz-full-screen #fullscreen-btn, \n#iframe-wrapper:-ms-fullscreen #fullscreen-btn {\n    display: none;\n}\n<\/style>\n\n<div class=\"responsive-iframe-container\" id=\"iframe-wrapper\">\n    <button id=\"fullscreen-btn\">\u5168\u87a2\u5e55<\/button>\n\n    <iframe loading=\"lazy\" \n        id=\"my-iframe\"\n        src=\"\/TV\" \n        width=\"500\" \n        height=\"300\" \n        frameborder=\"0\" \n        allowfullscreen\n        allow=\"autoplay; fullscreen\">\n    <\/iframe>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const fullscreenBtn = document.getElementById('fullscreen-btn');\n    \/\/ \u9396\u5b9a\u5168\u87a2\u5e55\u7684\u76ee\u6a19\u5143\u7d20\u70ba\u5e36\u6709 id=\"iframe-wrapper\" \u7684\u6700\u5916\u5c64 div\n    const iframeWrapper = document.getElementById('iframe-wrapper'); \n    \n    \/\/ \u6aa2\u67e5\u700f\u89bd\u5668\u662f\u5426\u652f\u63f4\u5168\u87a2\u5e55 API\n    const isFullScreenEnabled = document.fullscreenEnabled || \n                              document.webkitFullscreenEnabled || \n                              document.mozFullScreenEnabled || \n                              document.msFullscreenEnabled;\n\n    if (!isFullScreenEnabled) {\n        \/\/ \u5982\u679c\u700f\u89bd\u5668\u4e0d\u652f\u63f4\uff0c\u96b1\u85cf\u6309\u9215\n        fullscreenBtn.style.display = 'none';\n        console.warn(\"Full screen mode is not supported by your browser.\");\n        return;\n    }\n\n    fullscreenBtn.addEventListener('click', () => {\n        \/\/ \u78ba\u4fdd\u662f\u5c0d iframeWrapper \u9032\u884c\u5168\u87a2\u5e55\u8acb\u6c42\n        const elementToFullscreen = iframeWrapper;\n\n        if (elementToFullscreen.requestFullscreen) {\n            elementToFullscreen.requestFullscreen();\n        } else if (elementToFullscreen.webkitRequestFullscreen) { \/* Safari *\/\n            elementToFullscreen.webkitRequestFullscreen();\n        } else if (elementToFullscreen.msRequestFullscreen) { \/* IE11 *\/\n            elementToFullscreen.msRequestFullscreen();\n        } else if (elementToFullscreen.mozRequestFullScreen) { \/* Firefox *\/\n            elementToFullscreen.mozRequestFullScreen();\n        }\n    });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u5168\u87a2\u5e55<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-373","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/pages\/373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=373"}],"version-history":[{"count":6,"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/pages\/373\/revisions"}],"predecessor-version":[{"id":382,"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/pages\/373\/revisions\/382"}],"wp:attachment":[{"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}