Napili Community - Unable to play videos within the community when using VF
Communities , Summer 17 , Spring 17
Last updated 2022-02-15 ·Reference W-4018058 ·Reported By 14 users
In Review
Summary
Unable to play the videos within the community using Napili template, videos are embedded in a VF page. The video is played successfully if executed from the VF page in Classic and LEX.
Repro
1) Login the Org with System Admin User and assign CEO role to your Admin
2) Go to Communities, and check Enable Communities
3) Register your Domain Name
4) Press "New Community" button
5) Select "Napili" template
6) Name your Community
7) Click "Manage my community"
8) Go to Administration - Members
9) Add all the profiles from Available Profiles to Selected Profiles and Save.
10) Create a VF Page with the following code:
-------------------------
<apex:page standardcontroller="TrainingVideos__c" showHeader="false" >
</style>
<html>
<table id="j_id0:theGrid">
<tbody>
<tr>
<td>
<span id="j_id0:youtubePanel">
<iframe src="https://www.youtube.com/embed/W7qWa52k-nE" width="560" height="315" frameborder="0" allowfullscreen="true"></iframe>
</span>
</td>
</tr>
</tbody>
</table>
</html>
</apex:page>
------------------------
11) Go back to Setup in the Org, and find Build/Customize/Communities
12) Select your community created in step 6 and press "Builder" button
13) Select Components (first icon) in your left side and drag and drop the component "VisualForce" to any of your pages in your community.
14) Press "Publish" button
15) Go to the page where the video is embedded and play it
Actual Result:
============
- The video is not playable inline and when click into it, it will goes to invalid page.
Expected result:
============
- Video should be played successfully as it is when it is executed from the VF page involved.
Workaround
Workaround 1:
-------------------
1) Open the community in builder.
2) Open the 'Branding' properties panel (paintbrush icon)
3) Open the CSS editor by clicking on the "</>" button at the top.
4) Add the following CSS lines:
------------------
.oneAlohaPage .mask {
display: none;
}
--------------------
5) Save and publish the community.
Workaround 2:
-------------------
Use Lightning Components to embed the videos instead of VF pages.
Is it Fixed?
Any unreleased services, features, statuses, or dates referenced in this or other public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make their purchase decisions based upon features that are currently available.
