How to play audio and video files in visualforce page? The videos are stored as static resources.
[SalesForce] Play video stored as static resources
Related Solutions
There 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>
Try this instead of iframe:
<video controls="true">
<source src="{!$Resource.Create_New_Contact}" type="video/mp4" />
</video>
Best Answer
Something like this should work. I have not tested it out but in general should work. Most HTML tags would work in VF page and so the only thing that we need to do is see how we reference the static resource.