Skip to content

Instantly share code, notes, and snippets.

@hyrsky

hyrsky/rickroll.html

Last active January 27, 2021 17:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hyrsky/743a41630c1dfa8e3b0e4185d3ab0efd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hyrsky/743a41630c1dfa8e3b0e4185d3ab0efd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hyrsky revised this gist Jan 27, 2021. 1 changed file with 65 additions and 10 deletions.
    75 changes: 65 additions & 10 deletions rickroll.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,47 @@
    <meta charset="utf-8">

    <style>
    iframe {
    position: absolute;
    width: 100vw;
    height: 100vh;
    }

    </style>

    <div style="position: relative">
    <button type="button" id="btnPlay">
    Lue lisää
    <button type="button" id="btnPlay" style="width: 300px; font-size: 36px;">
    Lataa kuvat ja video
    </button>

    <!--
    <iframe id="video"
    width="640" height="360"
    frameborder="0"
    style="display: none; position: absolute; width: 100vw; height: 100vh;"
    allow="autoplay"
    ></iframe>
    -->

    <div>
    <div id="foo"></div>
    </div>

    <div id="overlay" style="display: none; position: absolute; width: 100vw; height: 100vh;" />
    <div id="overlay" style="display: none; position: absolute; width: 100vw; height: 100vh; z-index: -1">
    </div>

    </div>

    <script async src="https://www.youtube.com/iframe_api"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $("body").on("click", "#btnPlay", function () {
    console.log("hello world!");

    var player;

    $("body").on("click", "#btnPlay", function () {
    $("#btnPlay").hide();
    $("#video")[0].src = "https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1";
    $("#video").show();
    $("#overlay").show();
    //$("#video")[0].src = "https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1";
    //$("#video").show();

    $("body").css("margin",0);

    @@ -32,5 +50,42 @@
    return true;
    };

    });
    </script>

    player = new YT.Player('foo', {
    videoId: 'oHg5SJYRHA0', // YouTube Video ID
    width: 480, // Player width (in px)
    height: 640, // Player height (in px)
    playerVars: {
    autoplay: 1, // Auto-play the video on load
    controls: 0, // Show pause/play buttons in player
    showinfo: 0, // Hide the video title
    modestbranding: 1, // Hide the Youtube Logo
    loop: 1, // Run the video in a loop
    fs: 0, // Hide the full screen button
    cc_load_policy: 0, // Hide closed captions
    iv_load_policy: 3, // Hide the Video Annotations
    autohide: 0 // Hide video controls when playing
    },
    events: {
    onReady: function(e) {
    console.log("onReady");
    console.log(e);

    //e.target.mute();
    e.target.playVideo();

    setTimeout(() => {
    $("#overlay").show();
    $("#overlay").css('z-index', 100);
    $("#overlay").focus();
    }, 1);
    }
    }
    });

    });

    function onYouTubeIframeAPIReady() {
    console.log("youtube iframe api ready");
    }
    </script>
  2. hyrsky created this gist Jan 27, 2021.
    36 changes: 36 additions & 0 deletions rickroll.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    <meta charset="utf-8">

    <div style="position: relative">
    <button type="button" id="btnPlay">
    Lue lisää
    </button>

    <iframe id="video"
    width="640" height="360"
    frameborder="0"
    style="display: none; position: absolute; width: 100vw; height: 100vh;"
    ></iframe>

    <div id="overlay" style="display: none; position: absolute; width: 100vw; height: 100vh;" />

    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $("body").on("click", "#btnPlay", function () {
    console.log("hello world!");

    $("#btnPlay").hide();
    $("#video")[0].src = "https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1";
    $("#video").show();
    $("#overlay").show();

    $("body").css("margin",0);

    // Enable navigation prompt
    window.onbeforeunload = function() {
    return true;
    };

    });
    </script>