HTML5 video not working with jquery bxSlider plugin on iPad

When using HTML5 video with the bxSlider jQuery plugin on iPad, video playback often fails due to iOS-specific requirements and plugin compatibility issues. This guide shows how to properly configure bxSlider to work with HTML5 videos on iPad.

Setup Requirements

First, download the bxSlider plugin from the official website. Extract the downloaded zip file and locate the images folder. Copy this images folder into your project's js directory.

Required Files Structure

Include the following files in your project with proper linking:

<link rel="stylesheet" href="js/jquery.bxslider.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>

HTML Structure for Video Slider

Structure your HTML to ensure proper video support on iPad:

<div class="video-slider">
    <div class="slide">
        <video controls playsinline webkit-playsinline>
            <source src="video1.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="slide">
        <video controls playsinline webkit-playsinline>
            <source src="video2.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
</div>

JavaScript Configuration

Initialize bxSlider with iPad-specific settings:

$(document).ready(function() {
    $('.video-slider').bxSlider({
        video: true,
        useCSS: false,
        pager: false,
        controls: true,
        auto: false,
        mode: 'horizontal',
        onSlideAfter: function($slideElement, oldIndex, newIndex) {
            // Pause all videos when sliding
            $('video').each(function() {
                this.pause();
            });
        }
    });
});

Key Points for iPad Compatibility

Critical attributes and settings for iPad video playback:

• playsinline: Prevents fullscreen mode on iOS devices
• webkit-playsinline: Legacy iOS support
• useCSS: false: Disables CSS3 transitions that can interfere with video
• video: true: Enables video-specific optimizations

CSS Adjustments

Add these CSS rules to ensure proper video display:

.bx-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

.bx-wrapper .bx-viewport {
    overflow: hidden;
    position: relative;
}

Conclusion

The key to making HTML5 videos work with bxSlider on iPad is using the playsinline attribute, disabling CSS transitions, and properly structuring your video elements. The jquery.fitvids.js plugin also helps with responsive video sizing.