Embedding Short Videos and Playlists on Magento

Follow these steps to get the embed code snipper from LORA CMS

Once you've obtained the embed code, follow these steps to embed the live stream player on your Magento website:

1. Place the following custom script file in app/code/<Vendor>/Theme/view/frontend/web/js/ directory:

   short-videos.js

   define(["jquery", "loraSdk"], function ($, repositories) {
      "use strict";
      return function (config = {}, element) {
         if (!$(element).length) return;
   
         var defaultConfig = { component: "video-embed" };
         $.extend(defaultConfig, config);
   
         var shortVideosElement = document.createElement(config.component);
         for (var key in config) {
            if (key === "component") continue;
            if (config.hasOwnProperty(key)) {
               shortVideosElement.setAttribute(key, config[key]);
            }
         }
         var elementId = $(element).attr("id");
         if (!!elementId) {
            if (config.component === "video-embed") shortVideosElement.setAttribute("video-id", elementId);
            else shortVideosElement.setAttribute("playlist-id", elementId);
         }
         $(element).append(shortVideosElement);
      };
   });

2. Add LORA SDK script and the above short-videos.js file to the requirejs-config.js file in app/code/<Vendor>/Theme/view/frontend/ directory:

   requirejs-config.js

   var config = {
      map: {
         "*": {
            ...
            loraSdk: "https://lora-sdk.belive.sg/embed-js/testing/dev/lora-embed.js",
            shortVideos: "Magento_Theme/js/short-videos",
         },
      },
      ...
   };

3. Place the following file lora_short_videos.phtml in app/code/<Vendor>/Theme/view/frontend/templates/js/ directory:

   lora_short_videos.phtml

   <script type="text/x-magento-init">
      {
         ".lora-carousel-playlist": {
            "shortVideos": {
                  "component": "carousel-playlist"
            }
         },
         ".lora-grid-playlist": {
            "shortVideos": {
                  "component": "grid-playlist"
            }
         },
         ".lora-storyblock-playlist": {
            "shortVideos": {
                  "component": "storyblock-playlist"
            }
         },
         ".lora-video-embed": {
            "shortVideos": {
                  "component": "video-embed"
            }
         }
      }
   </script>

4. Add the following code to any page or block where you want to display the short videos:

   page_layout/my-layout.xml

   <referenceContainer name="before.body.end">
      <block class="Magento\Framework\View\Element\Template" name="lora-short-videos" as="lora-short-videos" template="Magento_Theme::js/lora_short_videos.phtml" />
   </referenceContainer>

5. Navigate to Magento Admin Dashboard > Content > Elements > Pages

   

6. Choose the page where you want to display the short videos, under Action column, click on Select dropdown > Edit.

   

7. Within the “Content” section, click on “Show / Hide Editor”. Paste the following code into the text editor and click Save.

   <div id="73eb40bf-62b8-431f-c544-08dc0b43ffbc" class="lora-carousel-playlist"></div>
   
   note

   • Replace the id with the actual id of the video or playlist.
   • The class name lora-carousel-playlist is used to define the type of the embed code. You can use lora-grid-playlist, lora-storyblock-playlist, or lora-video-embed based on the type of the embed code.

8. Go to your website and you should see the short videos embedded on the page.

   
   note

   If you are unable to see the short videos embedded on the page, try clearing the cache and refreshing the page.