mountfield video + no img swp

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<script src="https://www.screwfix.com/presentation-web-sitebuilder/js/browse.js"></script>
<script src="https://www.screwfix.com/assets/js/lib.min.js"></script>
<link rel="stylesheet" href="https://www.screwfix.com/images/general/assets/video/sfx_yt_video.css">
<div class="mountfield-brand-cat">


    <!-- updated image swapping just for the img next to the video -->


    <main id="container-main" class="wrp">
        <div class="inner">

            <div class="lawnmower_container brand-pages">

                <div class="row row-top--pdg">

                    <div class="row-wrp--mod">

                        <div class="landingpage_lawnmowers lg-12 md-24 sm-24 cols brand-pages">

                            <div class="ib--border">

                                <h1 class="ib-title">All Mountfield Lawn Mowers</h1>

                                <div class="ib">
                                    <a href="//www.screwfix.com/c/outdoor-gardening/lawn-mowers/cat840622?brand=mountfield" title="All Mountfield Lawn Mowers">
            
							<img class="ib_img show-lg-up" src='//www.screwfix.com/images/general/assets/gfx/mountfield_hero_lg.jpg' alt="All Mountfield Lawn Mowers" class="ib_img">
              
              <img class="ib_img show-md-only" src='//www.screwfix.com/images/general/assets/gfx/mountfield_hero_md.jpg' alt="All Mountfield Lawn Mowers" class="ib_img">
                            
              <img class="ib_img show-sm-only" src='//www.screwfix.com/images/general/assets/gfx/mountfield_hero_sm.jpg' alt="All Mountfield Lawn Mowers" class="ib_img">
              
						</a>
                                </div>
                            </div>

                        </div>

                        <div>
                            <div class="lg-12 md-24 sm-24 cols">
                                <div class="home-video-iframe-container">
             ...

CSS

.home-video-iframe-container {
    margin-bottom: 0px;
}

.home-video-iframe-thumbnail {
    background: url(//www.screwfix.com/images/general/assets/gfx/mountfield_video.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 64em) {
    /* remove this style below */
}

/*
.home-video-iframe-container {
     height:376px;
}
*/

.home-video-iframe-container .home-video-iframe-inner {
    height: 354px;
}

}

.mountfield-brand-cat img.MountfieldLogo {
    margin: 60px 35px;
}

.mountfield-brand-cat .mn_head {
    position: absolute;
    z-index: 2;
    background: #f6f6f6;
    height: 230px;
    width: 350px;
}

.mountfield-brand-cat .h1-styling {
    margin-bottom: 15px;
}

.mountfield-brand-cat .h1-styling h1 {
    color: #000;
    font-size: 26px;
    font-family: archivo_narrowbold, sans-serif;
    margin-bottom: 15px;
    display: inline !important;
}

.mountfield-brand-cat .row-wrp--mod--h2fix {
    margin: 0 -.3em;
}

.mountfield-brand-cat .h2 {
    color: #5b5b5b;
}

.mountfield-brand-cat .certona-tile__container,
.mt__item {
    border: 1px solid #fff;
}

.mountfield-brand-cat .mt__item .cat-link {
    color: #000;
}

.mountfield-brand-cat .mt__item .mt__item-title .h3 {
    color: #000;
}

.mountfield-brand-cat .row-title {
    width: 100%;
    border-bottom: 1px solid #000;
    float: left;
    margin: 26px 0 24px;
    position: relative;
}

.mountfield-brand-cat .row-title h2 {
    font-family: archivo_narrowbold, sans-serif;
    font-size: 26px;
    line-height: 26px;
    position: relative;
    left: 0;
    bottom: 0;
    margin-bottom: 15px;
    color: #000;
}

.mountfield-brand-cat .full_width_wrp {
    background: url(//www.screwfix.com/images/general/assets/gfx/mountfield_header_bg.jpg) center center no-repeat;
    background-color: #81a005;
    border-bottom: 18px solid #ab192d;
}

.mountfield-brand-cat .landingpage_lawnmowers .ib--border,
.mountfield-brand-cat...

JavaScript

var imgs = $('img.swap');
    var bw = $('body').innerWidth();

    imgs.each(function() {

        var imgNameSmall = $(this).data('src-small');
        var imgNameMedium = $(this).data('src-medium');
        var imgNameLarge = $(this).data('src-large');

        if (bw <= 640) {
            if (imgNameSmall) {
                $(this).attr('src', imgNameSmall);
            } else if (imgNameMedium) {
                $(this).attr('src', imgNameMedium);
            } else {
                $(this).attr('src', imgNameLarge);
            }
        } else if (bw > 640 && bw < 1025) {
            if (imgNameMedium) {
                $(this).attr('src', imgNameMedium);
            } else {
                $(this).attr('src', imgNameLarge);
            }
        } else {
            $(this).attr('src', imgNameLarge);
        }
    });
    
    
    
     
            $('.home-video-iframe-thumbnail[data-video]').one('click', function() {
                $(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + $(this).data("video") + '?autoplay=1&rel=0" frameborder="0" allowfullscreen=""></iframe>');
            });