Search code examples
phpjqueryhtmlprettyphoto

using prettyPhoto plugin I can not load video from my server?

If I use prettyPhoto, I can show the Despicable Me preview, and I can show youtube videos. But I cannot show a video from my own server. It either doesn't load, or an error message pops up that says either my path is incorrect or the image doesn't exist.

This is with both rel="prettyPhoto" and rel="prettyPhoto[movies]". Note: I do NOT want to embed a YouTube video with the YouTube logo.

If I delete rel="prettyPhoto" and use <iframe> tags instead, the same video I could not show with prettyPhoto DOES work. So, therefore, the path IS correct, and the movie DOES exist on my server.

BUT if I use this option the video is trapped within the frame, which is too small for the video's resolution and therefore not the option I want to use. I want to use prettyPhoto for the awesome effect it provides.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.css" />

<a href="https://axelta-monitor.s3.amazonaws.com/AX_Guard%2520Patrolling%2520Demo_AXB052_1499909053_008.mp4" title="View" rel="prettyPhoto[pp_gal]">View</a>

Solution

  • You DO need to use the iFrame and you can resize to whatever your content is

    I added ?iframe=true&width=200&height=200 to the URL

    http://jsfiddle.net/mplungjan/y1zz9car/

    $(document).ready(function() {
    $("a[rel^='prettyPhoto']").prettyPhoto();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css">

<div id="video_player">
  <a href="https://axelta-monitor.s3.amazonaws.com/AX_Guard%2520Patrolling%2520Demo_AXB052_1499909053_008.mp4?iframe=true&width=200&height=200" rel="prettyPhoto" title="My private Video">
    <img src="http://img.youtube.com/vi/cH6kxtzovew/default.jpg" alt="My image" width="50">
  </a>
</div>