How To Open Selected List Item Image, Video Or Location To Connect An Embedded Web Part To A List Web Part - Part Three

In this article, you will learn how to open selected list item image, video, or location to connect an embed web part to a list web part.

Introduction

In my previous article, I already explained how to open selected Modern List item details in List Properties Viewer.
Here, let us see about using modern web parts, and how we can view the selected list item without any customization using Embed Web Part to view the video, image, and location.
 
In SharePoint online modern site, Embed web part was different from the Link Web Part, which will only display a preview of an image, video or location. Microsoft added the ability to embed things on a SharePoint online modern site page.
 

Scenario

 
The requirement is to open the selected List item like Video, Image or location without opening it in a new tab of the browser window and Popup window of the model dialog box and without using custom code.
 
This should be achieved using Modern in OOB web parts.
 

Objective

 
The below OOB web parts will be used in this solution.
  1. List web part
    Connect to List & select Item

  2. Embed web part
    The web part will connect to list web part on this page to dynamically display a selected item in the list. With embed web part, you can enter links or embed code that uses variables, allowing you to show a wide variety of items depending on what your page viewer selects. Here are three examples of how you could show selected video, image, and location.

Images

 
I have created the “ImageShowcase” list. In this list we created two columns, Title and ImageURL. 
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
When a user chooses an image from the list web part, show a selected image in Embed web part.
 
Follow the below steps.
 
Step 1
 
Navigate to your SharePoint 2013 site -> Create Modern Page in Site Pages.
 
Step 2
 
From this page,
  • Edit the page.
  • Hover over the canvas where you would like to add layout section.
  • Click on the “+” Sign.
  • Add a new section, “Two Column” from the Section layout.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.
Step 3
 
You will see two sections to add web parts,
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
  • In the first column-section1,
  • Click on the “+” sign.
  • Select “List” from the web part toolbox.
  • Select relative List; then the below screen appears.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.

  • After the final selection of your selected List, the below screen will appear.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.
Step 4
  • In the second Column-section2,
  • Click on the “+” sign.
  • Select “Embed” from the web part toolbox.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.
  • After you select the Embed Web part, the below screen appears
  • Click Edit web part How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. on the left side of the Embed web part.
  • Click the ellipses (...) at the top right of the property pane, and then click Connect to the source.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.
     
Step 5
  • Under Connect to the source, select the relative list Name from the drop-down.
  • Under Web site address or embed code, add your embed code. In this example, 
  • the embed code is,

    <iframe width="693" height="390" src="[$ImageURL]" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

  • where [$ImageURL] is the variable that represents the column name for the Image URL's path.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.
  • Click Republish at the top of the page.
Final Step
  • Select any List item from the left side List
  • The file should be opened in the right-side Embed web part
Without Selected List Item Screen
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
With Selected List item
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
Video
 
I have Created the “Video Gallary” List. In this list we created two columns, Title and Video ID. In Title column set the video Title and in the Video ID column set the YouTube Video Key.
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
When a user chooses a Video Title from the list web part, show a selected Title Video in Embed web part.
 
Follow the same steps 1 to 4 of Image Section.
 
Step 5
  • Under Connect to the source, select the relative list Name from the drop-down.
  • Under Web site address or embed code, add your embed code. In this example,
  • the embed code is, https://www.youtube.com/watch?v=[$VideoID]
  • where [$VideoID] is the variable that represents the column name for the Video ID of the YouTube key.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.
  • Click Republish at the top of the page.
Final Step
  • Select any List item from the left side List
  • The file should be opened in the right-side Embed web part
Without Selected List Item Screen
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
With Selected List item
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
Location
 
I have Created the “CountriesLatitudeLongitude” List. In this list we created three columns, Title, Latitude, and Longitude. In Title column set the country Title and in the Latitude and Longitude column set the country latitude and longitude.
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
When a user chooses a Video Title from the list web part, show a selected Title Video in Embed web part.
 
Follow the same steps 1 to 4 of Image Section.
 
Step 5
  • Under Connect to the source, select the relative list Name from the drop-down.
  • Under Web site address or embed code, add your embed code. In this example,
  • the embed code is,
<iframe width="500" height="400" src="https://www.bing.com/maps/embed?h=400&amp;w=500&amp;cp=[$Latitude]~[$Longitude]&amp;lvl=13&amp;typ=d&amp;sty=r&amp;src=SHELL&amp;FORM=MBEDV8" frameborder="0" scrolling="no"> </iframe>
  • where [$Latitude] and [$Longitude] variable represents the countries list in latitude longitude column value.

    How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part.
  • Click Republish at the top of the page.
Final Step
  • Select any List item from the left side List
  • The file should be opened in the right-side Embed web part
Without Selected List Item Screen
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
With Selected List item
 
How To Open Selected List Item Image, Video Or Location Connect An Embed Web Part To A List Web Part. 
 
Click here to get all countries latitude longitude.
 
Note
Feature of the Embed web part
  • You can display content using a website address
  • Display content using embed code
  • Display dynamic content by connecting to another web part