JSFiddle - React, Tailwind, and code Playground

by Andre

HTML

<ul class="ProductList " style="position: relative; height: 1407px;">
    <li class="Odd " style="min-height: 456px; position: absolute; left: 0px; top: 0px;">
        <div class="ProductImage QuickView" data-product="296"> <a href="http://andredevelopment.mybigcommerce.com/boom-felazi-recycler-rig-slyme/" style="height: 370px;"><img src="http://cdn3.bigcommerce.com/s-mixi7d/products/296/images/1260/1_copy__29387__67142.1417730756.296.370.jpg?c=2" alt="Boom Felazi - Recycler Rig - Slyme"></a>

            <div class="categoryDemoVideo"></div>
        </div>
        <div class="ProductDetails" style="min-height: 47px;"> <a href="http://andredevelopment.mybigcommerce.com/boom-felazi-recycler-rig-slyme/" class=" pname">Boom Felazi - Recycler Rig - Slyme</a>

        </div> <em class="p-price">$349.00</em>

        <div class="ProductPriceRating" style="min-height: 0px;"> <span class="Rating Rating0"><img src="http://cdn3.bigcommerce.com/s-mixi7d/templates/__custom/images/IcoRating0.png?t=1419306711" alt="" style="display: none;"></span>

        </div>
        <div class="ProductCompareButton" style="display:">
            <div class="checker" id="uniform-compare_296"><span><input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_296" value="296" onclick="product_comparison_box_changed(this.checked)"></span>
            </div>
            <label for="compare_296">Compare</label>
            <br>
        </div>
        <div class="ProductActionAdd" style="display:;"> <a href="http://andredevelopment.mybigcommerce.com/boom-felazi-recycler-rig-slyme/" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a>

        </div>
<span class="videoDemoBtn"><div class="triangle"></div></span><span class="videoDemoBtn"><div class="triangle"></div></span>
    </li>
    <li class="Even " style="min-height: 456px; position: absolute; left: 310px; top: 0px;">
        <div class="ProductImage QuickView" data-product="431"> <a...

CSS

/* Product Listings */
 .ProductList {
    margin: 0 0 0 -14px;
    padding: 0;
    overflow: hidden;
}
.ProductList li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 0 0 20px 14px;
    list-style: none;
    height: auto !important;
    margin: 0;
    font-size: 1em;
    overflow: hidden;
    width: 33.333%;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align:center;
}
.SearchContainer .ProductList {
}
#SimilarMultiProductsByCustomerViews .ProductList li {
}
.left-content {
    float: left;
    width: 50%;
}
.left-content .ProductList li {
    width: 20%;
    padding: 0 0 10px 10px;
}
.ProductList .ProductPriceRating {
    padding-bottom: 5px;
}
#ProductDetails .ProductThumbImage {
    min-height: 400px;
    clear:both;
}
.ProductList .ProductImage, .brand-img, #ProductDetails .ProductThumbImage {
    overflow: hidden;
    text-align: center;
    display: table;
    table-layout: auto;
    width: 100%;
    position: relative;
}
.ProductList .ProductImage a, .ProductThumbImage a {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    line-height: 0;
    position:relative;
    border-bottom:solid 1px #ededed;
    border-top:solid 1px #ededed;
}
.ProductList .ProductImage img, .ProductThumbImage img {
    max-height: 100%;
    max-width: 100%;
    line-height: 1.5em;
    /* If the image takes a while to load or doesn't load at all the alt text will display. This spaces this text. */
    transition: opacity 0.5s ease 0s;
}
.ProductList .ProductImage a:hover img, .ProductThumbImage a:hover img {
    transition: opacity 0.5s ease 0s;
    opacity: 0.3;
}
.ProductThumb .ProductThumbImage a:hover img, #QuickViewImage a:hover img {
    opacity:1;
}
/* Add to cart popup __master overrides */
 .fastCartContent {
    min-height: 0;
    width: auto;
}
#fastCartContainer .ProductList .ProductImage {
    height: auto;
    /* Have to keep to...

JavaScript

$(".Options").each(function checkForVideo(url) {

    var ProductCatOpt = $(this);
    ProductId = $(this).parent().parent().find('div.ProductImage').attr('data-product');

    function ajax1() {
        return $.ajax('/content/videos/' + ProductId + '.mp4')
            .done(function () {
            $(ProductCatOpt).addClass('withVideo');
        }).fail(function () {
            return;
        });
    }
    $.when(ajax1()).done(function (a1) {

        $('.withVideo').closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');

        $('.videoDemoBtn').click(function () {

            if ($(this).hasClass('videoPlaying')) {
                $(this).removeClass('videoPlaying');
                /* 	            $(this).parent().find('img').show(); */
                $(this).parent().find('div.categoryDemoVideo').hide().html('');
            } else {

                var ProductId = $(this).parent().find('div.ProductImage').attr('data-product');
                $(this).addClass('videoPlaying');
                /* 	                $(this).parent().find('img').hide();         */
                $(this).parent().find('div.categoryDemoVideo').show().html('<video id="demoVideo" class="video" preload="auto" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" controls="controls" width="100%" height="100%" poster="https://store-mixi7d.mybigcommerce.com/content/videos/' + ProductId + '.jpg"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/' + ProductId + '.mp4"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/' + ProductId + '.ogv" type="video/ogg"><p>Your browser does not support this video.  Please upgrade your browser!</p></video>');
            }

            var video = document.getElementById('demoVideo');
            video.addEventListener('click', function () {
                video.play();
            }, false);

        });

    });




});