0 Replies Latest reply on Jul 10, 2012 8:36 AM by marcno

    HTML 5: Show fancybox with iframe video

    marcno

      I am just getting started with HTML5. I have created an HTML5 animation using Adobe Edge Preview 6. I am not really a developer, but more of a web designer.

       

      Here is the URL for a PHP test page running the animation (at the top of the page): http://www.clickcare.com/index38b.php

       

      Here is the code (The HTML5- generated animation plays but clicking on the Edge animation does not show the fancybox in the PHP page):

       

      <head>
      <!-- fancybox includes for video player within window -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
      <link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />


      <!--Adobe Edge Runtime-->

      <script type="text/javascript" charset="utf-8" src="welcome_pg_edgePreload.js"></script>
      <style>
      .edgeLoad-EDGE-564582621 { display:none; }
      </style><!--Adobe Edge Runtime End-->
      </head>

      <body>
      <div id="stage" class="EDGE-564582621">
      <a class="iframe" src="http://buto.tv/F8kKd"><IMG SRC="images/rembrandt13.jpg" WIDTH="628" HEIGHT="193" ALT="Medical Collaboration with Pictures and Words" BORDER="0"></a>
      </div>

      </body>

       

      I am interested in clicking at any point on the continually looping animation, and stopping the animation to show a fancybox loaded with an iframe video ready to play manually.

       

      When I close the fancybox, I would like the animation to continue playing in a loop from where it stopped.

       

      The size of the fancybox is 500px (w) X 280px (h), centered on the PHP page.

       

      In the current version of the webpage, http://www.clickcare.com, the viewer can click anywere on a static image (also at the top of the page) to show a fancybox loaded with the same iframe video ready to play manually.

       

      Here is the code that works with a static image (clicking on the static image DOES SHOW the fancybox)):

       

      <head>
      <!-- fancybox includes for video player within window -->

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
      <link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
      </head>

      <body>
      <div id="welcome_flash_movie">
      <a class="iframe" href="http://buto.tv/F8kKd"><IMG SRC="images/rembrandt13.jpg" WIDTH="628" HEIGHT="193" ALT="Medical Collaboration with Pictures and Words" BORDER="0"></a>
      </div>
      </body>

       

      I need this most importantly to work on modern browers (FireFox, Safari,  Chrome); mobile browsers; and optimally, older browsers such as IE6.

       

      All  help with providing a code snippet to make this work with the animated version of the webpage as it already does with the webpage version containing the static image, would be greatly appreciated.

       

      Thanks in advance for the help,

       

      Marc