Hide Video After It Ends On SquareSpace

Question

I am wrapping up a Squarespace website, the only issue is that I am trying to add an MP4 to the header, I was able to find some code, but the problem is the video keeps looping, even though I added loop="false"... Is there anyway to end the looping, and once it is over, to "display:none" via css?

https://marina-toybina.squarespace.com

<script type="text/javascript">
  $(window).bind("load", function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    } else {
      var banner = $('#pageWrapper img').first();
      if (banner.length === 0)
        banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
      if (banner.length === 0)
        banner = $('#parallax-images img').first();
      if (banner.length === 0)
        banner = $('.has-main-image img').first();
      if (banner.length === 0)
          banner = $('#page-thumb img').first();
      var url = "/s/Countdown-Intro_06.mp4";
      banner.hide();
      $('<video class="bannerVideo" autoplay="" loop="false" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
      adjustBanner($('.bannerVideo'), banner);
      setTimeout(function() {
        adjustBanner($('.bannerVideo'), banner);
      }, 2000);
      $(window, banner).resize(function() {
        adjustBanner($('.bannerVideo'), banner);
        setTimeout(function() {
          adjustBanner($('.bannerVideo'), banner);
        }, 200);
      });
    }
    function adjustBanner (video, banner) {
      video.css({
        height: banner.css('height'),
        width: banner.css('width'),
        top: banner.css('top'),
        left: banner.css('left'),
        position: 'relative',
        'object-fit': 'inherit'
      });
    }
  });
</script>

Is it a YouTube video? Because if so, then you could use YouTube's API in order to create a video and then track it to completion - http://stackoverflow.com/questions/25184549/hide-div-after-youtube-video-ends — Adjit, Jul 14 '16 at 19:25
Well in that case, still pretty straightforward and do-able: http://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes — Adjit, Jul 14 '16 at 21:00
It is the code above. it takes this code "var url = "/s/Countdown-Intro_06.mp4"; " and enters it into that string. — Rob Orf, Jul 15 '16 at 15:05
My guess is that "bannerVideo" is my ID or Class that I need to refer the example you showed me. — Rob Orf, Jul 15 '16 at 15:05

score 0 · Answer 1 · answered Jul 15 '16 at 18:13

0

Since you are already using jQuery it may be easier to just stick with it... here is my suggestion -

var $video = $('<video class="bannerVideo" autoplay="" loop="false" preload><source src="' + url + '" type="video/mp4"></video>');

$video.insertAfter(banner);

$video.on('ended', function(){
   //do something when video ends
});

answered Jul 15 '16 at 18:13

Adjit

10,134
12
53
98

Thank you Adjit! what could I put to hide the video where " //do something when video ends" is. Could it be video.css ({display:'none',});? – Rob Orf Jul 15 '16 at 18:38
@RobOrf not a problem, yes you can do that. It would be using `$video` not just plain `video` since `.css` is a `jQuery` function you need to tell the program that `video` is a `jQuery` object. If this was the correct answer to help you out, then please mark it as correct so other people know. – Adjit Jul 15 '16 at 18:42
@RobOrf you can also do `$video.fadeOut('fast');` – Adjit Jul 15 '16 at 18:50
Thanks Adjit, see my "answer" above. For some reason it still has not done anything differently, even though the code is completely different. I really really value you your assistance, and am humbled to know there are such great people in this community. – Rob Orf Jul 17 '16 at 19:08

score 0 · Answer 2 · answered Jul 17 '16 at 19:06

Adjit, this is what you suggested, however my video continues to loop, and does not end after being played. See here: marina-toybina.squarespace.com

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(window).bind("load", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
} else {
  var banner = $('#pageWrapper img').first();
  if (banner.length === 0)
    banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
  if (banner.length === 0)
    banner = $('#parallax-images img').first();
  if (banner.length === 0)
    banner = $('.has-main-image img').first();
  if (banner.length === 0)
      banner = $('#page-thumb img').first();
  var url = "/s/Countdown-Intro_06.mp4";
  banner.hide();
var $video = $('<video class="bannerVideo" autoplay="" loop="false" preload><source src="' + url + '" type="video/mp4"></video>');

$video.insertAfter(banner);

$video.on('ended', function(){
$video.fadeOut('fast');
});     
adjustBanner($('.bannerVideo'), banner);
  setTimeout(function() {
    adjustBanner($('.bannerVideo'), banner);
  }, 2000);
  $(window, banner).resize(function() {
    adjustBanner($('.bannerVideo'), banner);
    setTimeout(function() {
      adjustBanner($('.bannerVideo'), banner);
    }, 200);
  });
}
function adjustBanner (video, banner) {
  video.css({
    height: banner.css('height'),
    width: banner.css('width'),
    top: banner.css('top'),
    left: banner.css('left'),
    position: 'relative',
    'object-fit': 'inherit'
  });
}
 });
</script>

Hide Video After It Ends On SquareSpace

2 Answers2