JQuery: prettyPhoto() - when used in internet explorer it tries to download the video

Question

I have implemented a pop up video into my page using JQuery's prettyPhoto().

This works for Chrome, FireFox and Safari but when used in internet explorer (IE) it attempts to download the video opposed to playing it within the iframe.

The download works and will then play in a media player but playing inline without the download is the goal.

Anyone shed some light on why this might be?

<a href="<?php echo get_stylesheet_directory_uri(); ?>/assets/video/web-explainer.mp4?iframe=true" rel="prettyPhoto" class="banner-link box-link"></a>
<div class="banner-step-inner">
    <div>
        <img src="<?php echo $banner_step_image_url; ?>" alt="banner-icon" class="block mx-auto banner-icon">
    </div>
    <div>
        <h3 class="banner-text"><?php echo $banner_step_text; ?></h3>
    </div>
    <div class="banner-link-container">
        <div class="banner-link-inner">
            <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/chevvy-white-right.svg">
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Answer 1

IE use the Shockwave Flash Object to show the video in Iframe or other elements.

It is possible that this add on is not available in your IE or it is not enabled.

If it is not available than IE will download the video instead of playing it.

In future, Flash will be removed from IE and Edge. So user need to move to HTML5 Video element to display the video.

References:

Adobe Shockwave Player

The End of an Era – Next Steps for Adobe Flash

Flash & The Future of Interactive Content