Disable youtube autoplay video only on mobile devices to fix youtube autoplay bug in fullscreen.

p1s4

Hi,
i've purchased today the theme,Ii was searching for a full background theme whit autoplay video working both in desktop and mobile.
As i can see the youtube autoplay in fullscreen album doesn't work in iOS and this is normal.
The problem is that the video disappear and can't be longer played.

I see an old discussion about this problem in november with no solution, just disable autoplay. This is not good for me , i need autoplay in desktop.

I was searching a way to change the autoplay setting when i am whit a mobile device like IOS. Something like if device is iOS then autoplay_video=0 else take the value in the settings. In this way i think I can solve the problem waiting for a fix.

Tank you,
Marco.

p1s4

Hi,
I post my workaround to prevent youtube fullscreen autoplay to hide the video in ios.
I change the autoplay value and set ='0' when a mobile device is detected. In desktop autoplay work as usual.

Two ways to use mobile_detect.php

Install wordpress plugin mobble and activate.

Downloaded Mobile_detect.php and uploaded in /hypershot/advance/ directory in the server.

Then i added few lines to cpt_album php.

Whit Mobile_detect.php in folder directory

On line 3 add:

include 'Mobile_Detect.php';

With mobble plugin no need to add this line.


On line 280

find

$autoplay = trim( $new_way? $current_element['video_autoplay'] : get_post_meta($ID, '_video_autoplay_' . $i, true) );

replace:

$detect = new Mobile_Detect();

	if ($detect->isMobile()) {
    // Any mobile device.
 $autoplay       ='0';
} else {
$autoplay = trim( $new_way? $current_element['video_autoplay'] : get_post_meta($ID, '_video_autoplay_' . $i, true) );
}

On line 367

find:

$autoplay       = trim( $current_element['item_video_autoplay'] );

replace:

$detect = new Mobile_Detect();

if ($detect->isMobile()) {
    // Any mobile device.
 $autoplay       ='0';
} else {
 $autoplay       = trim( $current_element['item_video_autoplay'] );
}

For me work well on ios7 on ipad/iphone.

Let me know if this is a quite good solution, i don't know if this can cause some problem elsewhere.

Now i have the second problem with youtube fullscreen video. When i start the video in IPAD the video stay under the layout and i can't control, stop, pause etc. No button on loyout works. I need to put in native fullscreen the video to use the player controls, but when i stop the video i can't use nothing on the layout (menu, home link). The native player stay on the screen.

With iphone all works well. I start video, go in native mode (player) when i stop i come back to site loyout and a "play" button appear in the screen. All link and menu works well.

Now I'm looking for a solution, it's a little hard to find in the code where to change this settings...

Tanks,
Marco.

Air

Hello:-)

Your solution looks nice, however I must check why iOS still fails with this autoplay.

p1s4 said: Now i have the second problem with youtube fullscreen video. (...) The native player stay on the screen.

I don't have solution for this, but I know what you mean -> http://support.apollo13.eu/discussion/comment/3211#Comment_3211

With regards.

p1s4

I find the solution! Two days of hard work to understand how Hypershot works ;-)

The DIV that contain the video has not to be UNDER the menu DIV. Otherwise when you start play the native UI of iPAD is OVER the menu links.

First of all in iPad I need slide down the DIV containing the video when the menu slide down.

When we have fit album-->fulllscreen and the width of the device is larger than 650 px, the video in embedded in #whole-bg-image, but this DIV in under #root, the menu DIV is after this block.

When you set fit album --> fully-visible the DIV #whole-bg-image is under #mid.

This is important because i want the DIV containing the VIDEO slide-down with the menu.



CSS change, i use in Hypershot-child-theme style.css

ADD:

#access.touch .menu-container {
float:left;
position:relative;
}

This let the menu floating and slide down the div #mid

#access.touch h3.assistive-text {
top: 24px;
position: relative;
}

This fix the menu button in the sidebar when the menu slidedown. The top position depend on the logo size. May require adjustment.


I use the plugin MOBBLE to detect the mobile devices.

Mobble install Mobile_detect.php, that can be manualy installed.

I want to apply the mod to all mobile devices, while i want the site be whit same function and aspect on all devices. Mobile_detect.php can find an exact device like iPAD, or a operating system like iOS etc.


Now in utilities.php

on line 3, if you manualy install mobile_detect
Whit mobble plugin you don't need these lines

include 'Mobile_Detect.php';

find

//protected album
if(defined('ALBUM_PAGE_PROTECTED')){
$body_class .= ' album-protected';
}

add after

//fully visible album mobile
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// Any mobile device.
$body_class .= ' album-fully-visible';
}

This fix the DIV #whole-bg-image.

When class .album-fully-visible is in the body tag, the DIV #whole-bg-image is moved from #root to #mid.

Now the DIV containing the Video is in the block under the menu. When the menu expand, the div whit video slide down and you can access the menu links.

When you are in desktop the album use preferences in album option menu.

I know this way all albums work in #mid while in mobile. If someone need fullscreen album (under menu and footer) in mobile whit image slide, have to add some lines to detect when $slide ==video . I have no time for this now...sorry...

Hope this be useful!

I love Hypershot!


bye
Marco.

Air

Hello p1s4

I read whole post and now I understand we talk about two different issues.

p1s4 said: I need to put in native fullscreen the video to use the player controls

I know that. If you use Fit album: Full Screen then video controlls are hidden below layout. When I say layout I mean parts of theme that are not part of video. For that ocassion we have added Hide layout button in bottom right corner of layout.

When you use Fit album: Fully visible then there is no problem.

What I find problematic is that when you play video(on Ipad) in slider for example, then while video is going you can't change slide with arrows above video, cause video is taking all touch events that are going above it. It is explained here http://perrymitchell.net/article/interacting-with-overlay-elements-on-html5-video/

After video is ended then you can(but not always) change slide. It sux and I see no solution for it.

With regards.