Switch Between Multiple Videos

Overview

Create a Video Chooser that enables switching the video display extension between multiple videos. The example below supports 4 different videos.

Step-by-Step Guide

1. Create a variable to select between videos.

   
   

2. Navigate to each video. Right- click on the video and then click Copy embed code.

   
   
3. Paste the code in the document. Copy only the embed URL.

       <iframe width="1280" height="720" src="<strong>https://www.youtube.com/embed/rwUxqjnksAc</strong>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

4. .Click Extensions under the Advanced tab on the Visualizer Type page.

   

   
   

5. Click Create New Extension.

   

   
   

6. Enter a title for the new extension in the Name field.

   
   

7. Click to select from the Tag drop-down field.

   
   

8. Click Create.

   

   
   
9. The Init Code appears. Copy and paste the following code and then click Save.

     this.createScenarioPanel = function(scenario)
	  {
	  if (!this.scenarioInitialized)
	  {
	  this.scenarioInitialized = [];
	 Visualizer.view.scenario.TabPanel.addListener('tabchange', function(tabpanel, tab)
	  {
	 this.panel.setActiveTab(tabpanel.items.indexOf(tab));
	  }, this);
	  }
	  if (!this.scenarioInitialized[scenario.index])
	  {
	 this.scenarioInitialized[scenario.index] = true;
	  this.panel.add(new Ext.Panel(
	  {
	  'title': Visualizer.model.scenario.getNameDecorated(scenario),
	  'layout': 'fit',
	  'border': false,
	  'autoScroll': true,
	  'listeners':
	  {
	  'activate': function(tabpanel, tab)
	  {
	  Analyzer.controller.calculator.run();
	  }
	  },
	  'html': String.format('<div style="background-repeat:no-repeat; height:450; width:551;"><img style="vertical-align: middle; height: auto" src="https://www.visualize-roi.com/vr/images/uploads/5d28b6ac82ebd-Screenshot_7.png"> <div id="draggables"></div> </div>', scenario.index)}));
	  if (scenario.index == 0)
	  this.panel.setActiveTab(0);
	  }
	  };
	  this.panel = new Ext.TabPanel(
	  {
	  'title': 'Testimonial',
	  'listeners':
	  {
	  'tabchange': function(tabpanel, tab)
	  {
	  Visualizer.view.scenario.TabPanel.setActiveTab(tabpanel.items.indexOf(tab));
	  }
	  }
	  });
	  return this.panel;   

10. Click Update Code. Copy and paste the following code.

       this.createScenarioPanel(scenario);
	 var selector = ".image-tab- ";
	 if( typeof window.React != "undefined" || typeof window.React == "undefined" ){
	 var extID = ( typeof window.React !== "undefined") ? "##Ext_ID_Here##" : "extension_6us";
	 // Please Select
	 if (vars[0]['Code Reference to Select Video'].value == 1) {
	 var imgLink = '<div style="background-repeat:no-repeat; text- align:center;"><div class="embed-responsive embed-responsive-16by9"><iframe src="Embed URL of Video 1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> <div id="draggables"></div> </div>'
	 }
	 // Government and Public Sector
	 else if (vars[0][ 'Code Reference to Select Video'].value == 2) {
	 var imgLink = '<div style="background-repeat:no-repeat; text- align:center;"><div class="embed-responsive embed-responsive-16by9"><iframe src="Embed URL of Video 2" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> <div id="draggables"></div> </div>'
	 }
	 // Energy and Industrials
	 else if (vars[0][ 'Code Reference to Select Video'].value == 3) {
	 var imgLink = '<div style="background-repeat:no-repeat; text- align:center;"><div class="embed-responsive embed-responsive-16by9"><iframe src="Embed URL of Video 3" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> <div id="draggables"></div> </div>'
	 }
	 // Financial Services
	 else if (vars[0][ 'Code Reference to Select Video'].value == 4) {
	 var imgLink = '<div style="background-repeat:no-repeat; text-align:center;"><div class="embed-responsive embed-responsive-16by9"><iframe src="Embed URL of Video 4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> <div id="draggables"></div> </div>'
	 }
	 else {
	 var imgLink = ""
	 }
	 $('#'+ extID).append('<div > <div style="margin: 0 auto; width:80%; position: relative;padding: 5px;background-repeat:no-repeat; height:451; width:777;"> ' + imgLink + ' <div id="draggables"></div> </div></div>' );
	 }

11. Replace the "Code Reference to Select Video" with the code reference you will be using to select a video to display..

    
    

12. Replace the x (in value == x )with the number for the video.

    
    

13. Replace the URLs with the embedded URL of the video you wish to show, then click Save.

    
    
14. You can create a large video library by replicating the code for individual videos.