Docs

[John]

Hi guys,

So I have a pretty easy question but its stumping me a bit. I have a page:

http://www.full-engagement-experience.com/music-edit/

That has a video set to auto play when its viewed on a full size monitor. And so that works like a charm peps with big screens come and the video start playing.

I also have on the same page a mobile version of the page with a version of the video compressed and a much higher level thus the file size is lower. On this one I would like it to be the users have a choice on playing the video, so auto play is set to off.

Now here is the deal when I preview this page in a mobile fashion I hear the video on the PC version of page playing in the background.

So I’ve added the class:

pc-video

to the video on the full screen pc mode.

And then in the local page custom CSS I’ve added the following code:

@media screen and (max-width: 767px) {
  .pc-video {visibility: hidden;}
}

But something isn’t working quite right on my conditional CSS and the big pc version video is still auto playing on the mobile mode browsing.

Can you help me figure this out?

Thanks for the assist X team and keep up the good work!

John

[Jade]

Hi John,

Please try:

@media screen and (max-width: 767px) {
  .pc-video {display: none;}
}

Hope this helps.

[John]

So I added the code above and now when I look at the page on a mobile phone I can still hear the full size video playing in the background (and worse yet there are no controls on a mobile to stop it)

I’m open to any ideas you may have to fix this, thanks for the extra help!

John

[Rad]

Hi John,

Please add this code to Admin > Appearance > Customizer > Custom > Javascript.

jQuery( function($) { 

if ( $(window).width() <= 767 ) {
$('.pc-video video').each( function( index, element ) {

this.stop();
this.autoplay=false;

} );
}

} );

Hope this helps.

[John]

So I added the code above is the site wide JS customizer and its the full size movie is still loading on the mobile version of the site. Do you want to get in there and look at this to make sure I’ve done it right, I mean I’m pretty sure I’ve followed the directions to the letter but a second pair of eyes would be really helpful.

[John]

This reply has been marked as private.

[Lely]

Hello John,

You have added the code correctly. Please try updating the code to this instead:

jQuery( function($) { 

if ( $(window).width() <= 767 ) {
$('.pc-video video').each( function( index, element ) {

$(this).removeAttr( 'autoplay' );
} );
}

} );

Hope this helps.

[Author]

Posts