SF DE click image to add youtube iframe html

by ian_smithz

HTML

<div class="home-video-iframe-container">
<div class="home-video-iframe-inner curved-shadow">
<div class="home-video-iframe-thumbnail" data-video="zHK1busA33Y">
  
<button class="ytp-large-play-button ytp-button">
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.81"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg>
</button>
  
</div>
</div>
</div>

CSS

/* new */
/* youtube dummy play button */
.ytp-large-play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 48px;
    margin-left: -34px;
    margin-top: -24px;
    -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}

.ytp-button {
    border: none;
    background-color: transparent;
    padding: 0;
    color: inherit;
    text-align: inherit;
    font-size: 100%;
    font-family: inherit;
    cursor: default;
    line-height: inherit;
}

.ytp-button:not([aria-disabled=true]):not([disabled]):not([aria-hidden=true]) {
    cursor: pointer;
}

.home-video-iframe-thumbnail:hover .ytp-large-play-button-bg {
    -moz-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
    transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1);
    fill: #cc181e;
    fill-opacity: 1;
}

/* new */
.home-video-iframe-thumbnail {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    background:url(https://img.youtube.com/vi/zHK1busA33Y/hqdefault.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}




.home-video-iframe-container .home-video-iframe-inner iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.home-video-iframe-container .home-video-iframe-inner {
    background: #000;
    position: relative;
    z-index: 2;
    max-width: 100%;
    padding-bottom: 56.25%;
    height: auto;
}

.home-video-iframe-container {
    margin: 14px auto 0;
    border: 2px solid #fff;
}

JavaScript

$('.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>');
});