{"id":210,"date":"2025-10-03T19:27:31","date_gmt":"2025-10-03T19:27:31","guid":{"rendered":"https:\/\/shop.duckndata.com\/?page_id=210"},"modified":"2026-08-21T18:23:26","modified_gmt":"2026-08-21T18:23:26","slug":"movies","status":"publish","type":"page","link":"https:\/\/shop.duckndata.com\/?page_id=210","title":{"rendered":"Movies"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"210\" class=\"elementor elementor-210\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e13cf10 e-flex e-con-boxed e-con e-parent\" data-id=\"e13cf10\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfd1dd3 elementor-widget elementor-widget-heading\" data-id=\"bfd1dd3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\"><strong>I do not have control over the ads do not install anything that pops up.<\/strong><br><strong>Install an adblock to get no ads.<\/strong> (less on mobile)<br><br><strong>Links to download:<br>PC\/Laptop: <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/ublock-origin\/\" data-type=\"link\" data-id=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/ublock-origin\/\" target=\"_blank\" rel=\"noreferrer noopener\">Firefox<\/a>   <a href=\"https:\/\/chromewebstore.google.com\/detail\/ublock-origin-lite\/ddkjiahejlhfcafbddmgiahcphecmpfh?hl=en\" data-type=\"link\" data-id=\"https:\/\/chromewebstore.google.com\/detail\/ublock-origin\/cjpalhdlnbpafiamejdnhcphjbkeiagm\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome<\/a><\/strong><br>Android: <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=org.mozilla.firefox&amp;hl=en_US&amp;pli=1\" data-type=\"link\" data-id=\"https:\/\/play.google.com\/store\/apps\/details?id=org.mozilla.firefox&amp;hl=en_US&amp;pli=1\" target=\"_blank\" rel=\"noreferrer noopener\">FireFox App<\/a> + ublock extension<br><a href=\"http:\/\/www.duckndata.com\/wp-content\/uploads\/2024\/11\/blockguide.gif\" data-type=\"link\" data-id=\"http:\/\/www.duckndata.com\/wp-content\/uploads\/2024\/11\/blockguide.gif\" target=\"_blank\" rel=\"noreferrer noopener\">Guide<\/a><\/h6>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-92f9c9d e-flex e-con-boxed e-con e-parent\" data-id=\"92f9c9d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d01be7 elementor-widget elementor-widget-html\" data-id=\"5d01be7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"movie-app\">\n\n    <!-- ==============================\n         HEADER\n    =============================== -->\n\n    <header class=\"movie-header\">\n\n        <div class=\"movie-brand\">\n\n            <div class=\"movie-logo\">\n                \ud83c\udfac\n            <\/div>\n\n            <div>\n                <h1>Movies<\/h1>\n                <p>Find something to watch<\/p>\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"movie-search\">\n\n            <input\n                type=\"text\"\n                id=\"search-title\"\n                placeholder=\"Search for a movie...\"\n                autocomplete=\"off\"\n            >\n\n            <button\n                id=\"search-button\"\n                onclick=\"searchMovies()\"\n            >\n                \ud83d\udd0d\n            <\/button>\n\n        <\/div>\n\n    <\/header>\n\n\n    <!-- ==============================\n         PLAYER\n    =============================== -->\n\n    <section\n        id=\"movie-player-section\"\n        class=\"movie-player-section hidden\"\n    >\n\n        <div class=\"player-card\">\n\n            <!-- PLAYER HEADER -->\n\n            <div class=\"player-header\">\n\n                <button\n                    class=\"back-button\"\n                    onclick=\"closeMovie()\"\n                >\n                    \u2190 Back to movies\n                <\/button>\n\n\n                <div class=\"server-selector\">\n\n                    <span>Server<\/span>\n\n                    <select\n                        id=\"server-select\"\n                        onchange=\"switchServer()\"\n                    >\n\n                        <option value=\"vidsrc.me\">\n                            \u2b50 Stable\n                        <\/option>\n\n                        <option value=\"vidsrc.dev\">\n                            \u2b50 Backup\n                        <\/option>\n\n                        <option value=\"vidsrc.vip\">\n                            \u2b50 VIP\n                        <\/option>\n\n                        <option value=\"vidsrc.pro\">\n                            Pro\n                        <\/option>\n\n                        <option value=\"vidsrc2.ru\">\n                            XYZ\n                        <\/option>\n\n                        <option value=\"vidsrc2.ru\">\n                            TO\n                        <\/option>\n\n                    <\/select>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- VIDEO -->\n\n            <div class=\"video-wrapper\">\n\n                <div\n                    id=\"movie-video\"\n                    class=\"movie-video\"\n                ><\/div>\n\n\n                <div\n                    id=\"player-loading\"\n                    class=\"player-loading\"\n                >\n\n                    <div class=\"loading-spinner\"><\/div>\n\n                    <span>\n                        Loading player...\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- MOVIE INFORMATION -->\n\n            <div class=\"movie-information\">\n\n                <h2 id=\"movie-title\">\n                    Movie\n                <\/h2>\n\n\n                <div class=\"movie-meta\">\n\n                    <span id=\"movie-year\"><\/span>\n\n                    <span class=\"meta-separator\">\n                        \u2022\n                    <\/span>\n\n                    <span id=\"movie-rating\"><\/span>\n\n                    <span\n                        id=\"movie-runtime-container\"\n                        class=\"runtime-container\"\n                    >\n\n                        <span class=\"meta-separator\">\n                            \u2022\n                        <\/span>\n\n                        <span id=\"movie-runtime\"><\/span>\n\n                    <\/span>\n\n                <\/div>\n\n\n                <div\n                    id=\"movie-genres\"\n                    class=\"movie-genres\"\n                ><\/div>\n\n\n                <p\n                    id=\"movie-overview\"\n                    class=\"movie-overview\"\n                ><\/p>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n    <!-- ==============================\n         SEARCH RESULTS\n    =============================== -->\n\n    <section class=\"results-section\">\n\n        <div class=\"results-header\">\n\n            <div>\n\n                <h2>\n                    Search Results\n                <\/h2>\n\n                <p id=\"results-count\"><\/p>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div\n            id=\"search-results\"\n            class=\"movie-grid\"\n        >\n\n            <div class=\"empty-results\">\n\n                <div class=\"empty-icon\">\n                    \ud83c\udfac\n                <\/div>\n\n                <h3>\n                    Search for a movie\n                <\/h3>\n\n                <p>\n                    Enter a movie title above to get started.\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   APP\n========================================================= *\/\n\n#movie-app {\n\n    width: 100%;\n    max-width: 1500px;\n\n    margin: 0 auto;\n\n    padding: 25px;\n\n    box-sizing: border-box;\n\n    color: #ffffff;\n\n    font-family:\n        Inter,\n        -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        sans-serif;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.movie-header {\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    gap: 30px;\n\n    margin-bottom: 35px;\n}\n\n\n.movie-brand {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 14px;\n}\n\n\n.movie-logo {\n\n    width: 52px;\n    height: 52px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #e50914,\n            #7b0000\n        );\n\n    font-size: 25px;\n\n    box-shadow:\n        0 8px 25px rgba(229,9,20,.25);\n}\n\n\n.movie-brand h1 {\n\n    margin: 0;\n\n    font-size: 29px;\n\n    font-weight: 800;\n\n    letter-spacing: -0.5px;\n}\n\n\n.movie-brand p {\n\n    margin: 3px 0 0;\n\n    color: #777;\n\n    font-size: 13px;\n}\n\n\n\/* =========================================================\n   SEARCH\n========================================================= *\/\n\n.movie-search {\n\n    width: 100%;\n\n    max-width: 500px;\n\n    display: flex;\n\n    background: #171717;\n\n    border: 1px solid #292929;\n\n    border-radius: 12px;\n\n    overflow: hidden;\n\n    transition: .2s;\n}\n\n\n.movie-search:focus-within {\n\n    border-color: #e50914;\n\n    box-shadow:\n        0 0 0 3px rgba(229,9,20,.10);\n}\n\n\n.movie-search input {\n\n    flex: 1;\n\n    min-width: 0;\n\n    border: none;\n\n    outline: none;\n\n    background: transparent;\n\n    color: #fff;\n\n    padding: 14px 16px;\n\n    font-size: 14px;\n}\n\n\n.movie-search input::placeholder {\n\n    color: #666;\n}\n\n\n.movie-search button {\n\n    width: 52px;\n\n    border: none;\n\n    background: #e50914;\n\n    color: white;\n\n    cursor: pointer;\n\n    font-size: 17px;\n\n    transition: .2s;\n}\n\n\n.movie-search button:hover {\n\n    background: #f6121d;\n}\n\n\n\/* =========================================================\n   PLAYER\n========================================================= *\/\n\n.movie-player-section {\n\n    margin-bottom: 45px;\n\n    animation:\n        playerAppear .35s ease;\n}\n\n\n.hidden {\n\n    display: none !important;\n}\n\n\n.player-card {\n\n    overflow: hidden;\n\n    border-radius: 16px;\n\n    background: #101010;\n\n    border: 1px solid #252525;\n\n    box-shadow:\n        0 20px 60px rgba(0,0,0,.35);\n}\n\n\n\/* =========================================================\n   PLAYER HEADER\n========================================================= *\/\n\n.player-header {\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    padding: 12px 16px;\n\n    background: #151515;\n}\n\n\n.back-button {\n\n    border: none;\n\n    background: transparent;\n\n    color: #999;\n\n    cursor: pointer;\n\n    font-size: 13px;\n\n    font-weight: 600;\n\n    transition: .2s;\n}\n\n\n.back-button:hover {\n\n    color: white;\n}\n\n\n.server-selector {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 8px;\n\n    color: #777;\n\n    font-size: 12px;\n}\n\n\n.server-selector select {\n\n    border: 1px solid #333;\n\n    border-radius: 7px;\n\n    background: #222;\n\n    color: #fff;\n\n    padding: 7px 10px;\n\n    outline: none;\n\n    cursor: pointer;\n}\n\n\n\/* =========================================================\n   VIDEO\n========================================================= *\/\n\n.video-wrapper {\n\n    position: relative;\n\n    width: 100%;\n\n    aspect-ratio: 16 \/ 9;\n\n    background: #000;\n}\n\n\n.movie-video {\n\n    width: 100%;\n    height: 100%;\n}\n\n\n.movie-video iframe {\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: none;\n}\n\n\n.player-loading {\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 5;\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: center;\n\n    justify-content: center;\n\n    gap: 14px;\n\n    background: #050505;\n\n    color: #777;\n\n    font-size: 13px;\n\n    transition:\n        opacity .35s;\n}\n\n\n.player-loading.loaded {\n\n    opacity: 0;\n\n    pointer-events: none;\n}\n\n\n.loading-spinner {\n\n    width: 30px;\n    height: 30px;\n\n    border-radius: 50%;\n\n    border: 3px solid #333;\n\n    border-top-color: #e50914;\n\n    animation:\n        spin .8s linear infinite;\n}\n\n\n\/* =========================================================\n   MOVIE INFO\n========================================================= *\/\n\n.movie-information {\n\n    padding: 25px;\n}\n\n\n.movie-information h2 {\n\n    margin: 0 0 7px;\n\n    font-size: 27px;\n\n    font-weight: 800;\n\n    letter-spacing: -.4px;\n}\n\n\n.movie-meta {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 8px;\n\n    color: #999;\n\n    font-size: 13px;\n\n    margin-bottom: 13px;\n}\n\n\n.meta-separator {\n\n    color: #444;\n}\n\n\n#movie-rating {\n\n    color: #ffd700;\n\n    font-weight: 600;\n}\n\n\n.movie-genres {\n\n    display: flex;\n\n    flex-wrap: wrap;\n\n    gap: 7px;\n\n    margin-bottom: 13px;\n}\n\n\n.movie-genre {\n\n    padding: 4px 9px;\n\n    border-radius: 20px;\n\n    background: #222;\n\n    border: 1px solid #333;\n\n    color: #aaa;\n\n    font-size: 11px;\n}\n\n\n.movie-overview {\n\n    max-width: 900px;\n\n    margin: 0;\n\n    color: #8d8d8d;\n\n    font-size: 14px;\n\n    line-height: 1.65;\n}\n\n\n\/* =========================================================\n   RESULTS\n========================================================= *\/\n\n.results-section {\n\n    margin-top: 10px;\n}\n\n\n.results-header {\n\n    margin-bottom: 18px;\n}\n\n\n.results-header h2 {\n\n    margin: 0;\n\n    font-size: 21px;\n\n    font-weight: 750;\n}\n\n\n#results-count {\n\n    margin: 4px 0 0;\n\n    color: #666;\n\n    font-size: 12px;\n}\n\n\n\/* =========================================================\n   MOVIE GRID\n========================================================= *\/\n\n.movie-grid {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(auto-fill, minmax(155px, 1fr));\n\n    gap: 19px;\n}\n\n\n.movie-card {\n\n    min-width: 0;\n\n    cursor: pointer;\n\n    transition:\n        transform .25s ease;\n}\n\n\n.movie-card:hover {\n\n    transform:\n        translateY(-7px);\n}\n\n\n.poster {\n\n    position: relative;\n\n    width: 100%;\n\n    aspect-ratio: 2 \/ 3;\n\n    overflow: hidden;\n\n    border-radius: 10px;\n\n    background: #181818;\n}\n\n\n.poster img {\n\n    width: 100%;\n    height: 100%;\n\n    display: block;\n\n    object-fit: cover;\n\n    transition:\n        transform .35s ease;\n}\n\n\n.movie-card:hover .poster img {\n\n    transform:\n        scale(1.06);\n}\n\n\n\/* =========================================================\n   POSTER OVERLAY\n========================================================= *\/\n\n.poster-overlay {\n\n    position: absolute;\n\n    inset: 0;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    opacity: 0;\n\n    background:\n        linear-gradient(\n            to top,\n            rgba(0,0,0,.8),\n            rgba(0,0,0,.05)\n        );\n\n    transition:\n        opacity .25s;\n}\n\n\n.movie-card:hover .poster-overlay {\n\n    opacity: 1;\n}\n\n\n.play-circle {\n\n    width: 50px;\n    height: 50px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: #e50914;\n\n    color: white;\n\n    font-size: 18px;\n\n    box-shadow:\n        0 8px 25px rgba(0,0,0,.45);\n}\n\n\n\/* =========================================================\n   RATING\n========================================================= *\/\n\n.poster-rating {\n\n    position: absolute;\n\n    top: 8px;\n    right: 8px;\n\n    padding: 5px 7px;\n\n    border-radius: 6px;\n\n    background:\n        rgba(0,0,0,.85);\n\n    color: #ffd700;\n\n    font-size: 11px;\n\n    font-weight: 700;\n}\n\n\n\/* =========================================================\n   CARD TEXT\n========================================================= *\/\n\n.card-title {\n\n    margin-top: 9px;\n\n    color: #fff;\n\n    font-size: 13px;\n\n    font-weight: 700;\n\n    white-space: nowrap;\n\n    overflow: hidden;\n\n    text-overflow: ellipsis;\n}\n\n\n.card-year {\n\n    margin-top: 3px;\n\n    color: #666;\n\n    font-size: 11px;\n}\n\n\n\/* =========================================================\n   EMPTY\n========================================================= *\/\n\n.empty-results {\n\n    grid-column: 1 \/ -1;\n\n    padding: 75px 20px;\n\n    text-align: center;\n\n    color: #666;\n}\n\n\n.empty-icon {\n\n    margin-bottom: 14px;\n\n    font-size: 45px;\n\n    opacity: .55;\n}\n\n\n.empty-results h3 {\n\n    margin: 0 0 6px;\n\n    color: #aaa;\n\n    font-size: 17px;\n}\n\n\n.empty-results p {\n\n    margin: 0;\n\n    font-size: 13px;\n}\n\n\n\/* =========================================================\n   ANIMATIONS\n========================================================= *\/\n\n@keyframes spin {\n\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n\n@keyframes playerAppear {\n\n    from {\n\n        opacity: 0;\n\n        transform:\n            translateY(12px);\n    }\n\n    to {\n\n        opacity: 1;\n\n        transform:\n            translateY(0);\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 750px) {\n\n    #movie-app {\n\n        padding: 15px;\n    }\n\n\n    .movie-header {\n\n        flex-direction: column;\n\n        align-items: stretch;\n\n        gap: 20px;\n    }\n\n\n    .movie-search {\n\n        max-width: none;\n    }\n\n\n    .player-header {\n\n        padding: 10px;\n    }\n\n\n    .server-selector span {\n\n        display: none;\n    }\n\n\n    .movie-information {\n\n        padding: 18px;\n    }\n\n\n    .movie-information h2 {\n\n        font-size: 21px;\n    }\n\n\n    .movie-grid {\n\n        grid-template-columns:\n            repeat(2, minmax(0, 1fr));\n\n        gap: 12px;\n    }\n}\n\n\n@media (max-width: 400px) {\n\n    .movie-brand h1 {\n\n        font-size: 24px;\n    }\n\n\n    .movie-logo {\n\n        width: 45px;\n        height: 45px;\n    }\n}\n\n<\/style>\n\n\n<script>\n\n\/* =========================================================\n   CONFIG\n========================================================= *\/\n\nconst apiKey =\n    '395de9052435b5517885ed82441ff295';\n\nlet videoSource =\n    'vidsrc.me';\n\nlet currentMovieId =\n    null;\n\nlet searchCache =\n    {};\n\n\n\/* =========================================================\n   ENTER KEY SEARCH\n========================================================= *\/\n\ndocument\n    .getElementById('search-title')\n    .addEventListener(\n        'keydown',\n        function(event) {\n\n            if (event.key === 'Enter') {\n\n                searchMovies();\n\n            }\n\n        }\n    );\n\n\n\/* =========================================================\n   SEARCH MOVIES\n========================================================= *\/\n\nasync function searchMovies() {\n\n    const input =\n        document.getElementById('search-title');\n\n    const title =\n        input.value.trim();\n\n    if (!title) return;\n\n\n    const results =\n        document.getElementById('search-results');\n\n\n    results.innerHTML = `\n\n        <div class=\"empty-results\">\n\n            <div\n                class=\"loading-spinner\"\n                style=\"margin:auto;\"\n            ><\/div>\n\n            <p style=\"margin-top:15px;\">\n                Searching...\n            <\/p>\n\n        <\/div>\n    `;\n\n\n    const cacheKey =\n        title.toLowerCase();\n\n\n    try {\n\n        if (searchCache[cacheKey]) {\n\n            displayMovies(\n                searchCache[cacheKey]\n            );\n\n            return;\n        }\n\n\n        const response =\n            await fetch(\n                `https:\/\/api.themoviedb.org\/3\/search\/movie?api_key=${apiKey}&query=${encodeURIComponent(title)}`\n            );\n\n\n        if (!response.ok) {\n\n            throw new Error(\n                'TMDB request failed'\n            );\n        }\n\n\n        const data =\n            await response.json();\n\n\n        if (\n            !data.results ||\n            data.results.length === 0\n        ) {\n\n            results.innerHTML = `\n\n                <div class=\"empty-results\">\n\n                    <div class=\"empty-icon\">\n                        \ud83d\ude15\n                    <\/div>\n\n                    <h3>\n                        No movies found\n                    <\/h3>\n\n                    <p>\n                        Try searching for another title.\n                    <\/p>\n\n                <\/div>\n            `;\n\n            return;\n        }\n\n\n        searchCache[cacheKey] =\n            data.results;\n\n\n        displayMovies(\n            data.results\n        );\n\n\n    } catch (error) {\n\n        console.error(\n            'Movie search error:',\n            error\n        );\n\n\n        results.innerHTML = `\n\n            <div class=\"empty-results\">\n\n                <div class=\"empty-icon\">\n                    \u26a0\ufe0f\n                <\/div>\n\n                <h3>\n                    Search failed\n                <\/h3>\n\n                <p>\n                    Please try again.\n                <\/p>\n\n            <\/div>\n        `;\n    }\n}\n\n\n\/* =========================================================\n   DISPLAY MOVIES\n========================================================= *\/\n\nfunction displayMovies(movies) {\n\n    const container =\n        document.getElementById(\n            'search-results'\n        );\n\n\n    container.innerHTML = '';\n\n\n    document\n        .getElementById('results-count')\n        .textContent =\n        `${movies.length} movie${movies.length === 1 ? '' : 's'} found`;\n\n\n    movies.forEach(movie => {\n\n        const title =\n            movie.title ||\n            'Untitled';\n\n\n        const year =\n            movie.release_date\n                ? movie.release_date.substring(0, 4)\n                : '';\n\n\n        const rating =\n            movie.vote_average\n                ? movie.vote_average.toFixed(1)\n                : 'N\/A';\n\n\n        const poster =\n            movie.poster_path\n\n                ? `https:\/\/image.tmdb.org\/t\/p\/w342${movie.poster_path}`\n\n                : 'https:\/\/via.placeholder.com\/342x513\/181818\/777?text=No+Poster';\n\n\n        const card =\n            document.createElement('div');\n\n\n        card.className =\n            'movie-card';\n\n\n        card.innerHTML = `\n\n            <div class=\"poster\">\n\n                <img decoding=\"async\"\n                    src=\"${poster}\"\n                    alt=\"${escapeHTML(title)}\"\n                    loading=\"lazy\"\n                >\n\n\n                <div class=\"poster-rating\">\n                    \u2b50 ${rating}\n                <\/div>\n\n\n                <div class=\"poster-overlay\">\n\n                    <div class=\"play-circle\">\n                        \u25b6\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"card-title\">\n                ${escapeHTML(title)}\n            <\/div>\n\n\n            <div class=\"card-year\">\n                ${year || 'Unknown year'}\n            <\/div>\n\n        `;\n\n\n        card.addEventListener(\n            'click',\n            () => openMovie(movie.id)\n        );\n\n\n        container.appendChild(card);\n\n    });\n}\n\n\n\/* =========================================================\n   OPEN MOVIE\n========================================================= *\/\n\nasync function openMovie(movieId) {\n\n    currentMovieId =\n        movieId;\n\n\n    const playerSection =\n        document.getElementById(\n            'movie-player-section'\n        );\n\n\n    playerSection\n        .classList\n        .remove('hidden');\n\n\n    document\n        .getElementById('player-loading')\n        .classList\n        .remove('loaded');\n\n\n    document\n        .getElementById('movie-video')\n        .innerHTML = '';\n\n\n    document\n        .getElementById('movie-title')\n        .textContent =\n        'Loading...';\n\n\n    document\n        .getElementById('movie-overview')\n        .textContent = '';\n\n\n    playerSection.scrollIntoView({\n\n        behavior: 'smooth',\n\n        block: 'start'\n\n    });\n\n\n    try {\n\n        const response =\n            await fetch(\n                `https:\/\/api.themoviedb.org\/3\/movie\/${movieId}?api_key=${apiKey}`\n            );\n\n\n        if (!response.ok) {\n\n            throw new Error(\n                'Unable to load movie'\n            );\n        }\n\n\n        const movie =\n            await response.json();\n\n\n        displayMovieInfo(\n            movie\n        );\n\n\n        playMovie(\n            movieId\n        );\n\n\n    } catch (error) {\n\n        console.error(\n            error\n        );\n\n\n        document\n            .getElementById('movie-title')\n            .textContent =\n            'Unable to load movie';\n\n    }\n}\n\n\n\/* =========================================================\n   MOVIE INFO\n========================================================= *\/\n\nfunction displayMovieInfo(movie) {\n\n    document\n        .getElementById('movie-title')\n        .textContent =\n        movie.title || 'Unknown';\n\n\n    document\n        .getElementById('movie-year')\n        .textContent =\n        movie.release_date\n            ? movie.release_date.substring(0, 4)\n            : '';\n\n\n    document\n        .getElementById('movie-rating')\n        .textContent =\n        movie.vote_average\n            ? `\u2b50 ${movie.vote_average.toFixed(1)}`\n            : '';\n\n\n    \/* Runtime *\/\n\n    if (movie.runtime) {\n\n        const hours =\n            Math.floor(\n                movie.runtime \/ 60\n            );\n\n        const minutes =\n            movie.runtime % 60;\n\n\n        let runtimeText;\n\n\n        if (hours > 0) {\n\n            runtimeText =\n                `${hours}h ${minutes}m`;\n\n        } else {\n\n            runtimeText =\n                `${minutes}m`;\n\n        }\n\n\n        document\n            .getElementById('movie-runtime')\n            .textContent =\n            runtimeText;\n\n\n        document\n            .getElementById(\n                'movie-runtime-container'\n            )\n            .style.display =\n            'inline';\n\n\n    } else {\n\n        document\n            .getElementById(\n                'movie-runtime-container'\n            )\n            .style.display =\n            'none';\n\n    }\n\n\n    \/* Genres *\/\n\n    const genres =\n        document.getElementById(\n            'movie-genres'\n        );\n\n\n    genres.innerHTML = '';\n\n\n    if (movie.genres) {\n\n        movie.genres.forEach(\n            genre => {\n\n                const element =\n                    document.createElement(\n                        'span'\n                    );\n\n\n                element.className =\n                    'movie-genre';\n\n\n                element.textContent =\n                    genre.name;\n\n\n                genres.appendChild(\n                    element\n                );\n\n            }\n        );\n    }\n\n\n    \/* Description *\/\n\n    document\n        .getElementById('movie-overview')\n        .textContent =\n        movie.overview ||\n        'No description available.';\n}\n\n\n\/* =========================================================\n   PLAY MOVIE\n========================================================= *\/\n\nfunction playMovie(movieId) {\n\n    const container =\n        document.getElementById(\n            'movie-video'\n        );\n\n\n    container.innerHTML = '';\n\n\n    document\n        .getElementById(\n            'player-loading'\n        )\n        .classList\n        .remove('loaded');\n\n\n    const iframe =\n        document.createElement(\n            'iframe'\n        );\n\n\n    iframe.src =\n        `https:\/\/${videoSource}\/embed\/movie\/${movieId}`;\n\n\n    iframe.allowFullscreen =\n        true;\n\n\n    iframe.setAttribute(\n        'allow',\n        'autoplay; fullscreen'\n    );\n\n\n    iframe.setAttribute(\n        'scrolling',\n        'no'\n    );\n\n\n    iframe.onload = function() {\n\n        setTimeout(\n            () => {\n\n                document\n                    .getElementById(\n                        'player-loading'\n                    )\n                    .classList\n                    .add('loaded');\n\n            },\n            700\n        );\n\n    };\n\n\n    container.appendChild(\n        iframe\n    );\n}\n\n\n\/* =========================================================\n   SERVER SWITCH\n========================================================= *\/\n\nfunction switchServer() {\n\n    const select =\n        document.getElementById(\n            'server-select'\n        );\n\n\n    videoSource =\n        select.value;\n\n\n    if (!currentMovieId) return;\n\n\n    playMovie(\n        currentMovieId\n    );\n}\n\n\n\/* =========================================================\n   CLOSE MOVIE\n========================================================= *\/\n\nfunction closeMovie() {\n\n    document\n        .getElementById(\n            'movie-video'\n        )\n        .innerHTML = '';\n\n\n    document\n        .getElementById(\n            'movie-player-section'\n        )\n        .classList\n        .add('hidden');\n\n\n    currentMovieId =\n        null;\n\n\n    window.scrollTo({\n\n        top: 0,\n\n        behavior: 'smooth'\n\n    });\n}\n\n\n\/* =========================================================\n   ESCAPE HTML\n========================================================= *\/\n\nfunction escapeHTML(text) {\n\n    const element =\n        document.createElement(\n            'div'\n        );\n\n\n    element.textContent =\n        text;\n\n\n    return element.innerHTML;\n}\n\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>I do not have control over the ads do not install anything that pops up.Install an adblock to get no [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":10,"comment_status":"open","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-210","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"mailpoet_newsletter_max":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"madmin","author_link":"https:\/\/shop.duckndata.com\/?author=1"},"uagb_comment_info":4670,"uagb_excerpt":"I do not have control over the ads do not install anything that pops up.Install an adblock to get no [&hellip;]","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/shop.duckndata.com\/index.php?rest_route=\/wp\/v2\/pages\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shop.duckndata.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shop.duckndata.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shop.duckndata.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shop.duckndata.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=210"}],"version-history":[{"count":18,"href":"https:\/\/shop.duckndata.com\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":292,"href":"https:\/\/shop.duckndata.com\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions\/292"}],"wp:attachment":[{"href":"https:\/\/shop.duckndata.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}