You can make any link a RokBox popup by going to the HTML view of an article and adding "data-rokbox" right after the "a" in any link.  Below is an example:


Original 

<a href="documents/bulletin/July.pdf">Donate Now</a>

  

With Pop Up

<a data-rokbox href="documents/bulletin/July.pdf">Donate Now</a>




1) obtain URL/web address for a youtube video. 

example: https://www.youtube.com/watch?v=LKFuXETZUsI (Moana trainer)


2) open article to edit or create new

3) add play button/image to hyperlink or text to hyperlink

4) Link image or text

5) Edit HTML / Toggle editor


start: <p><a href="https://www.youtube.com/watch?v=LKFuXETZUsI"><img src="images/stories/clipart/icons/playbutton.png" alt="" /></a></p>


a) add "&feature=player_embedded" to edit of video URL inside " "


<p><a href="https://www.youtube.com/watch?v=LKFuXETZUsI&feature=player_embedded"><img src="images/stories/clipart/icons/playbutton.png" alt="" /></a></p>


b) add " data-rokbox " at the beginning after the "a" before "href"


<p><a data-rokbox href="https://www.youtube.com/watch?v=LKFuXETZUsI&feature=player_embedded"><img src="images/stories/clipart/icons/playbutton.png" alt="" /></a></p>


c) (optional) add  data-rokbox-caption="Moana Trailer" after URL" before > 


<p><a data-rokbox href="https://www.youtube.com/watch?v=LKFuXETZUsI&feature=player_embedded" data-rokbox-caption="Moana Trailer"><img src="images/stories/clipart/icons/playbutton.png" alt="" /></a></p>


6) Save & Close / Check your work. 

***** might have to set description to appear in respective article via rotator module*****


Let me know if this makes any sense at all. 

Pax Christi,


- Jackie



If you want to know anymore, here are some other instructions I have shared in the past:

http://demo.rockettheme.com/live/joomla-extensions/rokbox/




<a data-rokbox href="http://www.youtube.com/watch?v=bssstn218EA&feature=player_embedded" data-rokbox-caption="Disney Pixar Planes - Preview">YouTube</a>



You can create a regular hyperlink and add " data-rokbox " at the beginning after the "a" before "href"




Here are three examples. 

This would be edited in the HTLM view or Toggle Editor in the article manager. 

Paste an example of the following code. Edit the specific details based on the guide below and the content you are adding.  If you already have content in your article. This likely needs to be added where the image file is. 



<a href="https://www.youtube.com/watch?v=tBvlB-MXu-k&amp;index=1&amp;feature=player_embedded" data-rokbox="" data-rokbox-album="SemVideo" data-rokbox-caption="Jacob Schneider"><img src="/images/stories/BeckyH/2014_schneider_jacobsm.jpg" border="0" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></a>



<a href="https://www.youtube.com/watch?v=zAnvdkDbU7U&amp;index=1&amp;feature=player_embedded" data-rokbox="" data-rokbox-album="SemVideo" data-rokbox-caption="Mark Brantley"><img src="/images/stories/BeckyH/marksm.jpg" border="0" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></a>



<a href="https://www.youtube.com/watch?v=z__PTERAcjA&amp;index=1&amp;feature=player_embedded" data-rokbox="" data-rokbox-album="SemVideo" data-rokbox-caption="John Stang"><img src="/images/stories/BeckyH/john stang 2sm.jpg" border="0" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></a>


The part in red above is the specific youtube video identifier 

SemVideo is the part the connects the videos to each other and allows for arrowing over to the next video 

Green is the seminarians name -- it is a captain of the pop-up window. 

/images/stories/.... is the file path of the picture and in this case what is clicked on to make the youtube video appear.