1

I am using youtube videos on a website here

I have set a video to autoplay on home page. And In responsive mobile version (below resolution 767px) I hide the video using css display none. But video is still playing in the backend.

I did all this because I want to change the position of video in mobile version , so I hide the right sidebar video in mobile version and display the left side video.

Now I want to stop the video in mobile version when it is hide. But the video is still playing even when it is hidden using css. I know css can not stop iframe autoplay.

Is there any method which can relate the autoplay of youtube video depending upon the resolutions of the screen. So that we can play and stop the video as per the resolutions of the screen.

Vijay Lal
  • 318
  • 1
  • 2
  • 13

1 Answers1

0

Just Use Javascript to load the youtube video embed url as per the screen resolution dynamically, instead of using a static video url

This link may help to detect Screen Resolution.

If you feel the Screen Size is small , just remove youtube autoplay parameter from the url

EDIT: Check this url for Dynamic screen size handling

Community
  • 1
  • 1
jeyanthinath
  • 1,651
  • 2
  • 15
  • 22
  • In the link screen.availWidth is giving the available width of the screen, but I want to get the current screen width as like we reduce the size of our window from 1322 px to 767 px then it return the same result. – Vijay Lal Feb 05 '15 at 05:26
  • Then check this http://stackoverflow.com/questions/9720294/jquery-how-to-detect-window-width-on-the-fly – jeyanthinath Feb 05 '15 at 05:40