Skip to content

Instantly share code, notes, and snippets.

@Fprince333

Fprince333/herobillboard.html

Created November 12, 2019 16:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Fprince333/fe181d8d237b00c9761ba5a32c3d3d3d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Fprince333/fe181d8d237b00c9761ba5a32c3d3d3d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Fprince333 created this gist Nov 12, 2019.
    68 changes: 68 additions & 0 deletions herobillboard.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    <style type="text/css">.views-field-field-heading a {
    font-size: 20px;
    line-height: 26px;
    font-family: MarsCentra-Bold, sans-serif;
    color: #0000a0;
    padding-bottom: 7px;
    height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    }

    .hero-billboard-image {
    height: auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: #0000a0;
    }

    .hero-billboard-image video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    }

    .views-field.views-field-field-hero-video.hero-billboard-video video {
    object-fit: cover;
    height: 75vh;
    outline: none;
    width: 100%;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/mobile-detect.min.js"></script><script>
    document.addEventListener("DOMContentLoaded", function() {
    var video = document.createElement('video');
    video.autoplay = true;
    video.loop = true;
    video.muted = true;
    var sourceMP4 = document.createElement("source");
    sourceMP4.type = "video/mp4";
    sourceMP4.src = "https://gateway.mars.com/m/1277862a412a0f55/D8EB743A-Pledge-For-Planet-15sec.mp4";
    video.appendChild(sourceMP4);
    var img = document.createElement("img");
    img.alt = "Pledge for Planet";
    img.src = "https://gateway.mars.com/m/bec563e3d6371d0/original/Pledge-For-Planet-Homepage-Preroll.gif";
    var md = new MobileDetect(window.navigator.userAgent);
    if (!md.phone() && !md.tablet()) {
    $(".hero-billboard-image").css("min-height", "75vh");
    $("#hero-billboard-preroll").replaceWith(video);
    $(".hero-billboard-image video").get(0).play();
    } else {
    if (window.outerWidth >= 1200) {
    $(".hero-billboard-image").css("min-height", "75vh");
    }
    $("#hero-billboard-preroll").replaceWith(img);
    }
    });
    </script>