Create list of YouTube videos with thumbnails and titles

To display a list of YouTube Videos on a page, we can follow the steps given below.

1. In VIEW area of main.xml add a ListView listview1.

2. Create a Custom View custom.xml. Here add an ImageView imageview1 and TextView textview1.

3. For listview1 select custom.xml as CustomView.


4. Add a RequestNetwork component rn.

Also add an Intent component i.

5. Create a String List idlist, a Map List videoList, a Number variable n, and a Map variable map.

6. In onCreate event:
a. Add id of YouTube videos to idlist.

Note that in video URL https://youtu.be/dPHreMHHoGY  
the video id is dPHreMHHoGY.

b. Then use a repeat block. Repeat for length of List idlist.

c. Inside repeat block, use RequestNetwork method GET for url
Join
https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=
and get at n of idlist
and
&format=json
* See image above.

d. After this, inside repeat block, use Number variable n increase 1.

7. Add RequestNetwork onResponse method. Here, Get the response to map variable. Add the map to videoList and display videoList in ListView listview1.

8. Create a new page video.xml. Here add a WebView webview1.

9. Add ListView onBindCustomView event.
Here display thumbnail in imageview1 using key 'thumbnail_url' of videoList, and display title in textview1 using key 'title' of videoList.

Add imageview1 onClick Block. Here use intent to move to VideoActivity. Save value of key 'html' of videoList to Intent put extra using key 'video'.


10. In onCreate, of VideoActivity.java use WebView loadUrl block.
a.Create a String variable iframe.

b. Set iframe to Activity get extra key 'video' with replace all width="480" with width=100%.
Then replace all height="270" with height=100%.
Make sure of no extra spaces in between.

c. WebView webview1 loadUrl join data:text/html, and iframe.

d. Then use an add source directly block and put following code.
webview1.setWebChromeClient(new CustomWebClient());
This is required for enabling fullscreen mode for the video.

11. Create a More Block extra and in that put following code in an add source directly block.
}public class CustomWebClient extends WebChromeClient {
private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
protected FrameLayout frame;

// Initially mOriginalOrientation is set to Landscape
private int mOriginalOrientation = android.content.pm.ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
private int mOriginalSystemUiVisibility;

// Constructor for CustomWebClient
public CustomWebClient() {}

public Bitmap getDefaultVideoPoster() {
if (VideoActivity.this == null) {
return null; }
return BitmapFactory.decodeResource(VideoActivity.this.getApplicationContext().getResources(), 2130837573); }

public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback viewCallback) {
if (this.mCustomView != null) {
onHideCustomView();
return; }
this.mCustomView = paramView;
this.mOriginalSystemUiVisibility = VideoActivity.this.getWindow().getDecorView().getSystemUiVisibility();
// When CustomView is shown screen orientation changes to mOriginalOrientation (Landscape).
VideoActivity.this.setRequestedOrientation(this.mOriginalOrientation);
// After that mOriginalOrientation is set to portrait.
this.mOriginalOrientation = android.content.pm.ActivityInfo.SCREEN_ORIENTATION_PORTRAIT;
this.mCustomViewCallback = viewCallback; ((FrameLayout)VideoActivity.this.getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1)); VideoActivity.this.getWindow().getDecorView().setSystemUiVisibility(3846);
}

public void onHideCustomView() {
((FrameLayout)VideoActivity.this.getWindow().getDecorView()).removeView(this.mCustomView);
this.mCustomView = null;
VideoActivity.this.getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
// When CustomView is hidden, screen orientation is set to mOriginalOrientation (portrait).
VideoActivity.this.setRequestedOrientation(this.mOriginalOrientation);
// After that mOriginalOrientation is set to landscape.
this.mOriginalOrientation = android.content.pm.ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE; this.mCustomViewCallback.onCustomViewHidden();
this.mCustomViewCallback = null;
}
}

{

12. Save and run the project.

Note:-
The response we get by using RequestNetwork GET method on url for a video in above format is a json String whose value is like:
{"provider_url":"https:\/\/www.youtube.com\/","thumbnail_url":"https:\/\/i.ytimg.com\/vi\/9mrPHO-nkVE\/hqdefault.jpg","type":"video","height":270,"thumbnail_height":360,"width":480,"provider_name":"YouTube","version":"1.0","html":"\u003ciframe width=\"480\" height=\"270\" src=\"https:\/\/www.youtube.com\/embed\/9mrPHO-nkVE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen\u003e\u003c\/iframe\u003e","author_name":"Channel 4 News","title":"Coronavirus \u2018worse than a bomb\u2019 on Italy, says doctor coordinating response","author_url":"https:\/\/www.youtube.com\/user\/Channel4News","thumbnail_width":480}