[CameronParticipant]

Hi

I am using the Content Dock extension to slide-out a self-hosted video.

I want the video to autoplay when the Content Dock slides out, and I want it to stop when the Content Dock is closed. This is how video content works if I use something like Easy Fancybox to play it as an overlay.

Presently what is happening is the video begins playing as soon as the page is loaded (i.e. before the Content Dock has appeared), and, if you close(x) the Content Dock, the audio on the video keeps playing.

Please can you let me know how I can make the video in the Content Dock play as expected?

This is what I have added to the widget code:

<video width="384" height="216" autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

Thanks

[CameronParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Cameron,

Thanks for writing in!

To achieve that, you can use following JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $('.x-content-dock').find('video').get(0).pause();

  function contentDockPlayPauseVid() {
    if ( $('.x-content-dock').hasClass('x-content-dock-on') ) {
      $('.x-content-dock').find('video').get(0).play();
    }
  }

  $(window).ready(contentDockPlayPauseVid).scroll(function() {
    contentDockPlayPauseVid();
  });
  
  $('.x-close-content-dock').click(function() {
    $(this).siblings().find('video').get(0).pause();
  });
});

Make sure you don’t add autoplay attribute to your video. So, you video code would become:

<video width="384" height="216">
  <source src="video.mp4" type="video/mp4">
</video>

Thanks!

[CameronParticipant]

That’s so awesome! Thanks!!

[RadModerator]

You’re welcome 😉

[CameronParticipant]

Hey.. this is a little buggy. Sometimes when the close (X) button is pushed, the video goes away but the audio keeps playing.. any ideas?
Thanks.

[RadModerator]

Hi there,

Not on my end, could you try opening your browser developer tool’s console? Like Chrome developer tool. Then please send the screenshots of any error or logs you will get.

Thanks!

[CameronParticipant]

Hi

The devtools console is not producing any error messages.

To recreate the issue in Chrome, follow these steps:

1. Reload the homepage, fully scrolled to the top
2. Wait for all elements to load completely
3. Scroll down slowly, until the content dock pops out and the video begins to play
4. Close (x) the content dock and wait for it to disappear completely (audio symbol in tab disappears)
5. Scroll down a little further and the audio begins to play again with a new audio symbol in tab

I can recreate the error consistently using the above steps in Chrome v43 on Windows 7

Thanks for looking into the issue.

[RadModerator]

Hi there,

Would like to check again, but your site is now inaccessable. The hosts entry is never deleted. Perhaps something blocks me from accessing it?

Thanks!

[CameronParticipant]

Please could you try again?
Thank you.

[Rue NelModerator]

Hello There,

Please try to replace the js code with this js code instead:

jQuery(document).ready(function($) {
  $('.x-content-dock').find('video').get(0).pause();

  function contentDockPlayPauseVid() {
    if ( $('.x-content-dock').hasClass('x-content-dock-on') ) {
      $('.x-content-dock').find('video').get(0).play();
    }
  }

  $(window).ready(contentDockPlayPauseVid).scroll(function() {
    contentDockPlayPauseVid();
  });
  
  $('.x-close-content-dock').click(function() {
    $(this).siblings().find('video').get(0).pause();
    $('.x-content-dock').removeClass('x-content-dock-on').addClass('x-content-dock-off');
  });
});

We’d love to know if this works out for you. Thank you.

[CameronParticipant]

Thanks so much — that seems to have worked!

[CameronParticipant]

Err so sorry but the error persists, though to recreate it now the steps are slightly different:

1. Reload the homepage, fully scrolled to the top
2. Wait for all elements to load completely
3. Scroll down relatively quickly, and when the content dock pops out, close is straight away and keep scrolling down
4. The content dock and video disappears but the audio continues to play – the audio symbol in tab remains too

[ZeshanMember]

Hi Cameron,

You can try this JS code instead:

jQuery(document).ready(function($) {
  $('.x-content-dock').find('video').get(0).pause();

  function contentDockPlayPauseVid() {
    if ( $('.x-content-dock').hasClass('x-content-dock-on') ) {
      $('.x-content-dock').find('video').get(0).play();
    }
  }

  $(window).load(contentDockPlayPauseVid).scroll(function() {
    contentDockPlayPauseVid();
  });
  
  $('.x-close-content-dock').click(function() {
    var $this = $(this);
    $this.siblings().find('video').get(0).pause();
    $this.closest('.x-content-dock').removeClass('x-content-dock-on');
    $this.closest('.x-content-dock').addClass('x-content-dock-off');
  });
});

Further customizations from here would be getting into custom development. As custom development is outside the scope of our support, regretfully we can’t provide full implementations. The code provided is more a general idea, and it’s your responsibility to work out any other needs that may come up. You may wish to hire a developer, as this would be custom development.

However, I’ve considered it as a featured request and forwarded to our development team. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks!

[CameronParticipant]

Using the above Javascript code, the bug persists and can be recreated as described here: https://community.theme.co//forums/topic/content-dock-video-content-continues-to-play-when-window-closed/#post-308747

I guess I’ll just hope the next update of Themeco’s Content Dock plugin fixes the bug.

Thanks

[Author]

Posts