Cacher is the code snippet organizer for pro developers

if (!(/Mobi/.test(navigator.userAgent))) {
  const videoContainer = $('#welcome-video-wrapper');
  const videoData = '<video id="video" class="welcome-video" muted style="opacity: 0;">' +
                    '<source src="//pub-unified.s3.amazonaws.com/video/unified.webm" type=\'video/webm; codecs="vp8, vorbis"\'>' +
                    '<source src="//pub-unified.s3.amazonaws.com/video/unified.mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\'>' +
                    '<source src="//pub-unified.s3.amazonaws.com/video/unified.ogv" type=\'video/ogg; codecs="theora, vorbis"\'>' +
                    '</video>';
  videoContainer.append(videoData);
  const video = videoContainer.find('#video');
  function playVideo(video) {
    video.css('opacity', 1);
    video[0].play();
  }
  setTimeout(playVideo(video), 200);
}


var video = $('#video');
video[0].play();
video[0].pause();

var videoBtn = $('#js-video-btn'),
        video = $('#video_benefits');
    videoBtn.click(function() {
        $(this).hide();
        video[0].play();
    });
    video.click(function () {
        if (videoBtn.is(':hidden')) {
                video[0].pause();
                videoBtn.show();
        }
    });
    video.on('ended', function() {
        video[0].currentTime = 0;
        videoBtn.show();
    });
    
    
    var video = $('video');
    $('.review-card-btn').click(function() {
        $(this).hide();
        $(this).prev('video')[0].play();
        $(this).prev('video').attr('controls', '');
    });
    video.click(function () {
        if ($(this).next('.review-card-btn').is(':hidden')) {
            $(this)[0].pause();
            $(this).removeAttr('controls');
            $(this).next('.review-card-btn').show();
        }
    });
    video.on('ended', function() {
        $(this)[0].currentTime = 0;
        $(this).removeAttr('controls');
        $(this).next('.review-card-btn').show();
    });
    video.on('pause', function() {
        $(this).removeAttr('controls');
        $(this).next('.review-card-btn').show();
    });
    
    
     var mainVideo = $('#video');
    mainVideo[0].play();

@supports (-ms-ime-align:auto) {
    .welcome-video {
        height: auto;
        object-fit: none;
    }
}

<video id="video" poster="video/City-Nights.jpg" loop muted>
    <source src="video/City-Nights.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="video/City-Nights.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/City-Nights.ogv" type='video/ogg; codecs="theora, vorbis"'>
    Video tag not supported. Download the video <a href="video/City-Nights.webm">here</a>.
</video>


<div class="review-card">
  <video>
  <source src="video/Hanging%20There.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="video/Hanging%20There.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!--<source src="" type='video/ogg; codecs="theora, vorbis"'>-->
  </video>
  <button type="button" class="review-card-btn"></button>
</div>