How to make embedded video expandable or popup

[hoffie4]

I have put some videos in my Flare project, and I am trying to make them fit in with the pages. The two things I really want to be able to do is to have an embedded video that is initially small and thumbnail sized and then when it is clicked it expands and begins playing. The functionality for this would be similar to the the mc-thumbnail: popup for images, but instead of being a popup that goes over the original thumbnail, the size of the video just expands to a preset size (kind of like how you can click Theater Mode in Youtube and expand the player, but this would just happen by clicking the video).


The other thing I want to be able to do is have a link (either text or an image) that opens the video in a popup window. I'm looking for functionality similar to what is on the Flare website (http://www.madcapsoftware.com/products/flare/) when you click on Watch: MadCap Flare Overview. I have tried hyperlinking text and images and setting the target frame to "Popup Window," but this doesn't actually open a popup window in the same screen. Instead, it opens a new page in the same window, just like clicking any other link (i've tried using every browser). I need these links to open as an actual popup window in the frame. Does anyone know how to do this?

[hoffie4]

I've found that I can force a link to open in a popup window by opening the text editor and manually adding the following class after the href:

Code: Select all

<a href="../p_subfolder/ref_Topic.htm" [color=#FF0000]class="MCTopicPopup MCTopicPopupHotSpot MCXref xref"[/color]>Target text</a>

This works, but it's kind of a pain. I wish MadCap had just kept this functionality in Flare.

I am still looking for help making an embedded video on a page grow larger and play when the thumbnail version is clicked. If anyone has any idea how to do this, please help me out

[NorthEast]

I am still looking for help making an embedded video on a page grow larger and play when the thumbnail version is clicked. If anyone has any idea how to do this, please help me out

This might work as a very basic solution:

Code: Select all

video { max-width: 240px; }
video:focus { max-width: 100%; }

The video tag is used for an inserted HTML5 video.
This will set the normal width to 240px, but change this to 100% (i.e. the maximum available width) when the video has focus - i.e. you click it, or tab onto it.
It'll go back to normal size when you select something else on the page.

Apart from that, just try a Google search for things liek "video popup" or "video lightbox", and you'll find lots of more advanced solutions. Anything using javascript or jQuery should work in Flare.