HTML 5: Show fancybox with iframe video

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

What sort of files? What format? If HDV, FCP 4.5 will not work with them, as that version did not support HDV...FCP 5.0 was the first to support that format.
But that is just a stab in the dark.
Shane

Similar Messages

  • With the latest flash update and on firefox 13 when I scroll on pages with youtube videos or other flash content it become corrupted.

    When I actually play the videos it's fine, the issue only occurs with still images. This doesn't show up with vimeo videos.
    The images should explain more
    Before scrolling
    http://i.imgur.com/MzAs7.jpg
    After
    [IMG]http://i.imgur.com/2tZwm.jpg[/IMG]
    This does not occur with other browsers with the latest flash update.
    The problem also shows up even with add-ons disabled and testing it with a new profile.
    Does anybody have an idea with how to fix this, or is it a problem on adobe's end?

    I've fixed the problem by installing the older version of Flash Player (v11.2.202.235).
    - First, download the uninstaller from [http://helpx.adobe.com/flash-player/kb/uninstall-flash-player-windows.html here].
    - Close your browser(s).
    - Run uninstaller and remove flash player.
    - After the uninstall process, download and install the old version from [http://www.oldapps.com/flash_player.php here].
    Note: Download "Adobe Flash Player 11.2.202.235 (Non-IE)" if you are using 32 bit OS
    Or
    Download "Adobe Flash Player 11.2.202.235 (x64) (Non-IE)" for 64 bit OS.

  • Suddenly no sound with most videos

    Hi, I just updated to the latest version of Apple TV and now most videos don't have any sound. The videos start playing, but I just get overwhelmed by silence. When I play the vids in iTunes there is sound. Some (older) videos on the Apple TV still have sound, so the problem doesn't show up with all videos.
    Any ideas how this could be happening? I rebooted the Apple TV but that didn't help.
    I converted the vids with VisualHub (1.34.1) as always to .mov format and imported them to iTunes, which then synchronizes with the Apple TV.

    Tnx, this seems to be the problem. I just saw the other topic about it. I will read that one, I hope to find a solution there

  • When I watch tv shows in Front Row that I've bought off iTunes the audio gradually falls out of sync with the video. It does not happen with other files that I have converted into mp4s. Any ideas for fixing this? It's a huge bummer...

    When I watch tv shows in Front Row that I've bought off iTunes the audio gradually falls out of sync with the video. It does not happen with other files that I have converted into mp4s. Any ideas for fixing this? It's a huge bummer...

    I too have the same problem.  The audio drop out of sync in about 5 sec in not uncommon for the audio to be 30+ sec behind video.  Apple needs to fix this!!!!!!!!!!!!!!!!   its a joke,  my iphone is all messed up after the last update as well.  at one time not to long ago apple products and software were top rated, not so much any more, more and more problems are showing up and apple is unwilling or unalbe to fix the many issues.  Apple needs to fix the audio sync problem, it not the computer hardware or other software it ITUNES!!!!,  there is no workaround other then hitting pause and hitting pause and hitting pause to temp fix the problem. 

  • Can I mimic a 'slide show' of stills and videos with this technique

    I want to be able to mimic an old fashioned slide show on a Blu-ray disk, except that each 'slide' – I'll call them items – could be a true still, or a still with pan/zoom, or even a short video. Whatever a particular item is, I want to click a button and the show advances to the next item. If the next item is a video, the video pauses on the last frame when it is finished.
    Just like the old magazine full of slides, imagine a folder full of items – some may be stills, some videos. After importing into Encore, setting up the navigation and menus, and then burning to Blu-ray, I want to be able to play them in sequence at the press of the Enter button.
    I'm pretty much a novice with Encore, and to save spending more time reading the manual, I thought I'd ask if I can mimic a slide show in Encore with the technique described below. I got the idea from page 152 of the PDF manual:
    The buttons on a menu are the primary navigation tool for the viewer. They control how the viewer steps through the project. Each button in a menu must lead to another menu, a timeline, a chapter, a playlist, a chapter playlist, or a slide show.
    My limited experience with Encore is to set up a series of videos on a single timeline, and generate one menu with a "Start" button on it. When the Blu-ray starts up, the Start screen appears and stays there until I press Enter. Works well.
    A slide show of stills using buttons only
    So I thought: to generate my old-fashioned slide show (ignore videos for the moment), I would use the buttons themselves as the stills, taking my queue from the quote above: "Each button in a menu must lead to another menu…". My slide show would consist of jumping from one menu to the next. This leads to my first question:
    Q1: Is it possible for a menu to have a full-screen button, call it the Image Button, that is actually the still image that is desired to be shown? So the viewer sees the Image Button, thinks it's the image (which it is), but it is actually a button. When the viewer presses Enter, the button activates and goes to the next menu which also happens to be the next full-screen image. The viewer is jumping from Image Button to Image Button, with the buttons filling the screen and being the actual images.
    A slide show including videos
    To include a video in the slide show, the destination when Enter is pressed would be a timeline with the appropriate video. At the end of this video, the navigation would lead to a menu which has an Image Button of the last frame of the video. The effect is that the video is paused on the last frame, waiting for the user to hit Enter to advance to the next item (still or video).
    If there is an easier way to mimic a slide show of stills and videos, please let me know.

    Stan – I posted 3 years ago in the Keynote Forums (I'm on Mac) about this sort of thing, knowing that eventually I would want to do it. The answer came back then that Keynote might have problems. So I've recently posted again about Keynote, but no responses as yet.
    I expected problems with Encore and welcome some of them. Overcoming problems is the best way to become intimately involved with software.
    I'm glad you asked why I don't just use Powerpoint (or Keynote in my case). Now's my chance to clarify my thoughts:
    Macs do not upscale very well. Sometimes I may want to show part of a DVD. I've tested playing a DVD on my iMac versus on a Oppo BDP93, fed to a BenQ W7000 projector throwing a 3 metre image. There is an obvious difference in image quality because the Oppo, being hardware based, can interpolate in real time as it scales from 576p (PAL) to 1080P. DVD Player on my iMac simply magnifies the image, resulting in obvious pixellation.
    Dissolves and complex effects in Premier challenge any software based h.264 player. I don't like to see decoding artifacts, for example, during a dissolve while a part of the image is also reducing in size, spinning, and disappearing into the distance. An extreme example, but an effect I used once. From my reading of blu-ray player reviews – and from my limited testing – all blu-ray players can easily handle the highest bit rates from a blu-ray disk.
    I don't have a laptop so I'd have to buy one. I'd rather spend the money on a dedicated player if that route turns out to be suitable.
    I don't trust computers for a presentation. Too unreliable. When I was showing multiscreen audio visuals in the 1980s (4-6 projectors), I always had a backup Tascam 4-track with me, back up soundtrack on tape, back up amp, and a backup slide projector. Even had a backup amp in the car. Speakers, well, if one failed I had two there anyway. With digital, to feel comfortable, I'd have to buy a second laptop. A good quality, backup Blu-ray player can be had for $100. And yes, I do have a backup W7000. I don't trust digital projectors either.
    Running a presentation from a laptop always looks amateurish to me. Someone hunched over a tiny screen, fooling around with Windows or OSX. And usually it's all mirrored on the big screen for everyone to see. I'm never impressed. I want to replicate a cinema experience as closely as possible. Darkness, the audience hushed, and up comes the first image.
    Any suggestions about automatically linking a whole heap of menus?

  • I make videos using my go pro hd camera, but when i export it only half of my 3 min video shows up with the audio playing in the background, plus when i try to select the quality in the export options it won't let me select 720p or 1080p?????? help!!!

    i make videos using my go pro hd camera, but when i export it only half of my 3 min video shows up with the audio playing in the background, plus when i try to select the quality in the export options it won't let me select 720p or 1080p?????? help!!!

    What you could do now is break up your video into smaller parts and render them out, then assemble them again as a whole.
    I know this is not the best fix, but it might work.
    You can duplicate an edit in the main screen, then delete the last bits and export,
    do the same for the other half.
    Then import the two bits (or more if you need) in a new edit.
    Out of curiosity, can you post what format the video is in?
    Copy a video straight from the camera to your computer.
    Open it in Quicktime player, and with out playing type Apple + i
    or Control + i for PCs
    It should tell you lots of info about the video, and might help us to see what is wrong.
    This is what it looks like:

  • I am in the process of developing a site, and I'm working with nested iframes. The html page inside the nested iframe is not displying in the iframe window in Firefox only, but is instead opening in a new window. Any advice on how to fix this?

    I am developing a website with nested iframes. The problem that I am having is that the html page inside the nested iframe is not displaying in the iframe window in Firefox only. The first level iframe is behaving properly, but the second level is not. Any help with this would be greatly appreciated.

    Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
    http://forums.mozillazine.org/viewforum.php?f=25 <br />
    You'll need to register and login to be able to post in that forum.

  • Am editing with red files in premier pro and when I export and then upload to youtube it is not showing as an hd video.  can anyone help?

    am editing with red files in premier pro and when I export and then upload to youtube it is not showing as an hd video.  can anyone help?

    Then it's probably YouTube - have you checked here to see that you're watching the hi res version? It could be that YouTube is choosing an easier version to display based on your internet connection.
    You can see on this screenshot that although the video has up to 1080 specs, my connection is making YouTube show me the 360p version by default.

  • How do  create a slide show with both video and photos in elements 12

    how do  create a slide show with both video and photos in elements 12

    Hi Brian
    You can batch process a set of prepared slides from Full Edit (see image) using:
    File >> Process Multiple Files
    In the PMF dialog you can choose filename, date, or description (caption)
    Make sure you choose a separate destination folder to your source folder so as tot to permanently overwrite your originals.
    Click image to view

  • I have a mac book pro and when I turned on iChat it would not let me video chat with more then one person even though I was able to in the past. It only showed an icon to video chat with one person. Please help!!

    I have a mac book pro and when I turned on iChat it would not let me video chat with more then one person even though I was able to in the past. It only showed an icon to video chat with one person. Please help!!!! ASAP

    Hi,
    Check the iChat Menu > Preferences > Video Section > Bandwidth setting.
    iChat needs to see a Minimum of 128kbps to do 1-1 chats in Video
    For 3 and 4 way chats it needs 384kbps
    Set the Bandwidth to 500kbps if it is set lower.
    Also check the speed you are getting from your Internet supplier.
    9:28 PM      Thursday; February 23, 2012
    Please, if posting Logs, do not post any Log info after the line "Binary Images for iChat"
      iMac 2.5Ghz 5i 2011 (Lion 10.7.3)
     G4/1GhzDual MDD (Leopard 10.5.8)
     MacBookPro 2Gb (Snow Leopard 10.6.8)
     Mac OS X (10.6.8),
    "Limit the Logs to the Bits above Binary Images."  No, Seriously

  • Thinkpad USB Port Replicator with Digital Video - extended monitor shows only mouse icon

    Hi,
    I have been using my Thinkpad USB Port Replicator with Digital Video for quite a long time with my previous employer laptop. I recently switched job and got a new laptop (Dell XPS 3, Win 8.1). While installing/paring this laptop with the port replicator, I had some issues e.g. extended monitor not getting identified etc. I updated the drivers and now I am able to identify the extended monitor. But the extended monitor shows only the mouse icon and nothing else. I have upto date Intel HD graphics drivers installed in the laptop. Intel's Graphics control panel doesn't show the extend option for the USB monitor, but able to still move the mouce icon to the extended monitor.
    Any help/pointers to fix this issue is highly appreciated.

    I have the exact same problem on my W510. Everything but the screen Works. I cannot however do duplicate screens. That would help a Little bit, so I could use the big monitor instead of just the laptop.
    Please fix this Lenovo!

  • My new ipad 2 is missing Garage Band but I've  had a welcome email from Apple with a video showing how to use it. How do I get it?

    My new ipad2 is missing Garage Band but I've had a welcome email from Apple with a video of how to use it. How've do I get it?

    Thank you. I tried searching for it in the App store earlier but only the 'learn garage band in 30 days' came up - just tried again andvth garage band app came up. Great App for £2.99 !! Thanks for you help :-)

  • Why do video clips in purchased v12 still show "created with trial version"

    I'm new to Premiere so bear with me. I trialled elements v12, liked it and purchased a download. When I import clips they still show "created with trial version". I removed all traces I could find of the trial version before installing the new one so I'm baffled.
    Can someone please enlighten me?
    Thanks

    rogdav
    Please check out the following two blog posts to see if any of the solutions will work for you in the likelihood that we are dealing with an activation issue.
    ATR Premiere Elements Troubleshooting: PE12: Premiere Elements 12 Editor Will Not Open
    ATR Premiere Elements Troubleshooting: PE12: Sign In Failure (Connect to Internet or Fix Computer Clock)
    If all else fails and while Premiere Elements is still the current version, it is a good idea to involve Adobe in this via its Adobe Chat. For that, click on following link.
    Contact Customer Care
    Premiere Elements
    Adobe ID, Signing In
    Adobe ID, Sign In, Account Help
    Chat Panel
    I have set the above link for Chat Panel. If the set does not hold, then you will need to navigate to Chat Panel using the above titles as guides.
    As of a few moments ago, the Chat Panel was shown as available.
    Please review and let us know the outcome.
    Thanks for the follow ups.
    ATR

  • Fancybox with Vimeo?

    Anyone get fancybox with Video working?
    I have this on my stage:
       $('html, body').css({
                  "background": "url(images/background_cap.png) repeat-x top left"
    $("#Stage").css("margin","auto")
                          $(‘<script type=”text/javascript” src=”js/fancybox/jquery.fancybox.js?v=2.1.4″></script>’).appendTo(“#Stage”);
    $(‘<link rel=”stylesheet” type=”text/css” href=”js/fancybox/jquery.fancybox.css?v=2.1.4″ media=”screen” />’).appendTo(“#Stage”);
    And on my button with a click action I put:
    $.fancybox.open([
    type: 'iframe',
    href : 'http://player.vimeo.com/video/69182633?autoplay=1',
    title : '600 x 600'
    href : 'img/800800.jpg',
    title : '800 x 800'
    padding : 0

    There are some samples in the comments area of the page you reference that may assist with getting the video to work.
    Darrell

  • CP 6 issue with inserted videos

    Hi All,
    I have an issue with inserted videos in CP6. They play in preview (F8) but not in published output (swf nor html).
    This is what I do:
    The videos created with CP6, Record new Demo
    output cpvc
    open cpvc in CP 6
    publish see settings below:
    Now I want to insert the captured and published demo into my training CP6 project
    click 'Video' on menu bar -> Insert Video -> select 'Event Video' -> browse to the file on my computer -> select file (mp4) - click OK
    Video gets loaded into CP6 project with default skin
    Before save the changes of the project I change the settings on the property panel to:
    Now I preview my project
    Press F8
    Preview is generated
    video demo plays automatically as expected
    This all even works well with multiple demo videos on one slide which can be selected by clicking different show me buttons (advanced actions created to show and hide according videos)
    BUT now I publish my project and nothing works anymore, videos do not show on scene and cannot be selected with respective show me buttons
         Publishing settings are:
    At the end of the publishing dialogue I click to view output in web browser (IE9) and there starts the trouble:
    IE shows up withfollowing dialogue:
    I allow blocked content and select cancel in the following dialogue box:
    And the training loads, everything works fine except the videos integrated to start automatically there is a blank space nothing.
    Does anyone have an idea solution for me?
    I am so puzzled and do not know hoe to proceed...
    Thanks in advance for your reply!!!
    Stephanie

    Hi RodWard,
    Thanks for your fast reply!!!
    The video files are present in the same folder as the SWF publish location.
    The drive letter is on my local PC with multiple partitions and not a network drive.
    Flash global security settings are set for E:
    To your last suggestion about file naming I did the following:
    Generate new mp4s
    Name them only with alphanumerics ie. DemoScroll
    insert them into project
    preview OK
    publish and check if demos are in folder - yes they are
    open html in IE9  - NOK!!!
    Now frustration rose...
    So I tried one thing that I had not yet tried - open html in FireFox and there it is OK :-)
    I do not understand....BUT we need to be able to support IE!!!!
    Do you think there are specific settings that need to be changed in IE to make it work?
    I would highly appreciate a suggestion what to look for in IE...
    Do you think it is related to IE9?  ´
    Since I have IE 9 and CP6 I also get the LMS messages and actriveX message when viewing projects in browser.
    Looking forward to your help.
    Thanks in advance Stephanie

Maybe you are looking for

  • VBA code to import scanned images into Photoshop CS2 with TWAIN

    Hi, I have to develop a solution that automates the scanning of an image using the TWAIN driver interface. Once scanned, the image appears as a new document in Photoshop where it will be further processed using VBScript scripts. The solution so far :

  • ITunes 10.5 beta to iTunes 10.5 won't open iTune library "damaged .itl" PLEASE HELP

    I've been using iTunes 10.5 beta not sure which version on my MBP and i now installed iTunes 10.5 on my iMac but it won't open my iTune library. its giving me an error saying something like "damaged .itl" PLEASE HELP I'm in ****!!!!

  • How to reverse clip order in FCP7 timeline?

    I'd like to reverse the order of clips in my FCP7 timeline  (NOT reversing each individual clip). I want to show some clips on the timeline and then immediatley play the same set of clips in reverse order (not each individual clip in reverse order).

  • Using Quick time with UDF movies

    It seems that most of my movies are UDF format, and they work fine with Windows media player, but they dont work with quicktime play. Is there something I can do here. I am using a PC XP Thanks Gary

  • Cisco ISE or NAC Guest with web security (IronPort) integration

    All, We have a scenario where guests will be authenticated against the ISE or NAC Guest server, and customer will place an IronPort to provide web security, however, we can not find referentes whether IronPort can or cannot integrate with Guest Serve