0

I have written code so that i can embed videos in a visualforce page. However, I want the video to pop up in an aesthetic way. For that I am using fancyBox, which is not working. The details regarding fancyBox can be found here[ http://fancyapps.com/fancybox/ ]. I have uploaded the zip file as a static resource and renamed it as "fancybox". I am getting no errors in the developer console.

Here is the code:

<apex:page standardController="Training__c" sidebar="false" tabStyle="Training__c">

    <apex:includeScript value="http://code.jquery.com/jquery-latest.min.js" />
    <apex:includeScript value="{!URLFOR($Resource.fancybox, '/source/jquery.fancybox.pack.js?v=2.1.5')}" />
    <apex:stylesheet value="{!URLFOR($Resource.fancybox,'/source/jquery.fancybox.css?v=2.1.5')}" />      
<script type="text/javascript">
var j$ = jQuery.noConflict();    
        $j(document).ready(function() {
            $j(".fancybox").fancybox();
        });
    </script>


    <apex:pageBlock title="New User Training Module">
    <apex:pageBlockSection title="Videos" >
     <apex:iframe width="400" height="300" src="https://www.youtube.com/embed/SGPvYQ1o2x4" rendered="true" frameborder="true"/>
     <a class="fancybox" rel="group" href="https://www.youtube.com/watch?v=y3ZUwPVnDWs">Link</a>
    </apex:pageBlockSection>  
    </apex:pageBlock>
    <apex:pageBlock title="Advanced User Training Module">
    <apex:pageBlockSection title="Videos" >
     Welcome!
    </apex:pageBlockSection>  
    </apex:pageBlock>


</apex:page>
1

enter image description hereThere were some errors in the code.

  • You were loading http in https (Security issue in browser)
  • some typos (like j$ vs $j)
  • Add "fancybox.iframe" class to the link to make it an iframe

I think this should do it for you.

<apex:includeScript value="https://code.jquery.com/jquery-latest.min.js" />
<apex:includeScript value="{!URLFOR($Resource.fancybox, '/source/jquery.fancybox.pack.js?v=2.1.5')}" />
<apex:stylesheet value="{!URLFOR($Resource.fancybox,'/source/jquery.fancybox.css?v=2.1.5')}" />      
var $j = jQuery.noConflict(); $j(document).ready(function() { $j(".fancybox").fancybox(); });
<apex:pageBlock title="New User Training Module">
<apex:pageBlockSection title="Videos" >
 <apex:iframe width="400" height="300" src="https://www.youtube.com/embed/SGPvYQ1o2x4" rendered="true" frameborder="true"/>
 <a class="fancybox fancybox.iframe"  href="https://www.youtube.com/embed/y3ZUwPVnDWs">Link</a>
</apex:pageBlockSection>  
</apex:pageBlock>
<apex:pageBlock title="Advanced User Training Module">
<apex:pageBlockSection title="Videos" >
 Welcome!
</apex:pageBlockSection>  
</apex:pageBlock>

  • I had "script" tag in there that messed up the code. This is my first time so if some can suggest how to fix, that'd be great. – Jaswinder Rattanpal Jan 9 '15 at 23:04
  • thanks but it still doesnt work! any idea on how to debug javascript in the developer console? – Mike Jan 10 '15 at 5:39
  • I am not sure what you mean. Yoy can debug this easily with developer tools in chrome or Firefox. I did test the code and it worked for me so not sure why it's not working for you. Make sure the static resource is in proper format. If you get 404 for those js and can files then that'd be the issue. – Jaswinder Rattanpal Jan 10 '15 at 14:25
  • yes, that seems to be the issue. I have uploaded the zip-file I downloaded directly as the static resource and I am using the same links as mentioned in the fancybox website. I am not sure how to fix this. This is my first time using static resource. – Mike Jan 10 '15 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.