Embedding video

Note: A bug in iOS 8.3+ forces links to blog posts with an embedded Youtube video to open the Youtube app (if installed on the device). Until Apple fixes it, it is something that we can't code around. Please file a report at https://developer.apple.com/bug-reporting/ - we have done so, but the more reports Apple receives, the better the chances they'll assign resources to fix the problem.

WPtouch Pro fully supports HTML5 video, YouTube and Vimeo, embed code as well as oEmbed, which is automatically enabled in WordPress 3.5+. For best performance on devices with small screens, be sure to avoid using fixed dimensions on page elements (including iframes).

By definition, fixed dimensions override any scaling capabilities of iOS or WPtouch Pro. Choose to use flexible dimensions whenever possible to allow page elements to resize for various mobile screen sizes. You may also add custom styling to your mobile theme to force flexible dimensions on those page elements.

For instances where iframes are automatically inserted into your site, you may try adding the following custom CSS to your active WPtouch Pro copied theme: iframe {width: 100% !important;} See Adding Custom Styling for more details on adding CSS to your mobile theme.

POPULAR VIDEO PLAYERS & FORMATS

HTML5 video

The basic implementation of HTML5 video is Using a video format compatible with mobile devices is necessary for it to play on mobile devices. Example:

JW Player Plugin for WordPress

A popular video plugin for WordPress is the JW Player for WordPress (off-site url). To allow videos embedded with this plugin to be automatically resized to fit the display area of mobile devices you'll need to add width="auto" to the shortcode when adding a video into one of your pages or posts. Example:

[jwplayer mediaid="147" width="auto" height="320"]

The JW Player Plugin requires you to supply a mobile-compatible video format, like .mp4 or .m4v to have your videos play properly on mobile devices.

EasyVideoPlayer

When using EasyVideoPlayer ( off-site url) you may need to override the size of the wrapper it uses to contain the embedded video to allow it to fit the smaller screens used by mobile devices. Apply the custom CSS below to your WPtouch Pro theme: .evp-video-wrap { width: 60% !important; } See Adding Custom Styling for more details on adding CSS to your mobile theme.