Skip to content

Instantly share code, notes, and snippets.

@nettles-sync

nettles-sync/Lazy Load Youtube Videos.html

Last active January 25, 2021 05:04
Show Gist options
  • Save nettles-sync/c273fe5aa6f3aa67489cae109539f295 to your computer and use it in GitHub Desktop.
Save nettles-sync/c273fe5aa6f3aa67489cae109539f295 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nettles-sync revised this gist Feb 8, 2020. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions Lazy Load Youtube Videos.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,9 +5,11 @@ <h2>Title</h2>
    <big>Description</big>
    </div>
    <div class="col-md-6">
    <div class="youtube" data-embed="fenkF-qOnnk">
    <!-- Example Youtube Video Url https://www.youtube.com/watch?v=dQw4w9WgXcQ -->
    <!-- Place the v= parameter in data-embed -->
    <div class="youtube" data-embed="dQw4w9WgXcQ">
    <div class="play-button"></div>
    </div>
    </div>
    </div>
    </div>
    </div>
  2. nettles-sync revised this gist Feb 8, 2020. 3 changed files with 86 additions and 90 deletions.
    91 changes: 1 addition & 90 deletions Lazy Load Youtube Videos.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,71 +1,3 @@
    <style media="screen">
    .youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer
    }

    .youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: .99
    }

    .youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
    z-index: 1;
    opacity: .9;
    border-radius: 6px
    }

    .youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #fff
    }

    .youtube img,
    .youtube .play-button {
    cursor: pointer
    }

    .youtube img,
    .youtube iframe,
    .youtube .play-button,
    .youtube .play-button:before {
    position: absolute
    }

    .youtube .play-button,
    .youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
    }

    .youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
    }

    .vidrow {
    padding: 25px 0;
    }

    .vidrow big {
    margin-bottom: 25px;
    }
    </style>
    <div class="container">
    <div class="row vidrow" style="margin:0;">
    <div class="col-md-6">
    @@ -78,25 +10,4 @@ <h2>Title</h2>
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    (function() {
    var youtube = document.querySelectorAll(".youtube");
    for (var i = 0; i < youtube.length; i++) {
    var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";
    var image = new Image();
    image.src = source;
    image.addEventListener("load", function() {
    youtube[i].appendChild(image);
    }(i));
    youtube[i].addEventListener("click", function() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "");
    iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=1");
    this.innerHTML = "";
    this.appendChild(iframe);
    });
    };
    })();
    </script>
    </div>
    19 changes: 19 additions & 0 deletions lazy.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    (function() {
    var youtube = document.querySelectorAll(".youtube");
    for (var i = 0; i < youtube.length; i++) {
    var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";
    var image = new Image();
    image.src = source;
    image.addEventListener("load", function() {
    youtube[i].appendChild(image);
    }(i));
    youtube[i].addEventListener("click", function() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "");
    iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=1");
    this.innerHTML = "";
    this.appendChild(iframe);
    });
    };
    })();
    66 changes: 66 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    .youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer
    }

    .youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: .99
    }

    .youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
    z-index: 1;
    opacity: .9;
    border-radius: 6px
    }

    .youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #fff
    }

    .youtube img,
    .youtube .play-button {
    cursor: pointer
    }

    .youtube img,
    .youtube iframe,
    .youtube .play-button,
    .youtube .play-button:before {
    position: absolute
    }

    .youtube .play-button,
    .youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
    }

    .youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
    }

    .vidrow {
    padding: 25px 0;
    }

    .vidrow big {
    margin-bottom: 25px;
    }
  3. nettles-sync created this gist Feb 8, 2020.
    102 changes: 102 additions & 0 deletions Lazy Load Youtube Videos.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,102 @@
    <style media="screen">
    .youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer
    }

    .youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: .99
    }

    .youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
    z-index: 1;
    opacity: .9;
    border-radius: 6px
    }

    .youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #fff
    }

    .youtube img,
    .youtube .play-button {
    cursor: pointer
    }

    .youtube img,
    .youtube iframe,
    .youtube .play-button,
    .youtube .play-button:before {
    position: absolute
    }

    .youtube .play-button,
    .youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
    }

    .youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
    }

    .vidrow {
    padding: 25px 0;
    }

    .vidrow big {
    margin-bottom: 25px;
    }
    </style>
    <div class="container">
    <div class="row vidrow" style="margin:0;">
    <div class="col-md-6">
    <h2>Title</h2>
    <big>Description</big>
    </div>
    <div class="col-md-6">
    <div class="youtube" data-embed="fenkF-qOnnk">
    <div class="play-button"></div>
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    (function() {
    var youtube = document.querySelectorAll(".youtube");
    for (var i = 0; i < youtube.length; i++) {
    var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";
    var image = new Image();
    image.src = source;
    image.addEventListener("load", function() {
    youtube[i].appendChild(image);
    }(i));
    youtube[i].addEventListener("click", function() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "");
    iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=1");
    this.innerHTML = "";
    this.appendChild(iframe);
    });
    };
    })();
    </script>