Show Youtube in App Inventor - Embed Youtube in MIT App Inventor

Hello friends and welcome to Obsidian Soft,

Recently, I embedded my YouTube mental maths videos in my mental maths app so this gave me the idea of teaching something similar in MIT App Inventor.
As you can see this screen is showing a mental math trick and in the lower part of the screen, we have the associated mental math video.

You can do the same thing in your MIT App inventor apps. For example, if you have a recipe app, you can embed the associated recipe video within your app or if you have an educational app like my mental maths app, you can embed or integrate the associated tutorial video. Embedding or integrating youtube videos in your apps is great way to extend the reach of your videos. By the way, if you are wondering, this mental maths app has been created using Solar2D SDK particularly great for making 2D games. My Countville app has also been developed in this. Solar2D is based on Lua; the programming language that is also used by Roblox. You can check out both these apps by downloading them from the Google Play Store.

Coming back to the tutorial, embedding YouTube videos requires a special HTML code that is actually provided by YouTube itself and we can customize it according to our needs.

So, let’s begin...

Open up MIT App Inventor and create a new project. Name it YouTubeVideoApp.

For screen1, make align horizontal and align vertical both center and make screen orientation portrait.

Drag and drop a vertical arrangement from the Layout.

For this vertical arrangement, make align horizontal and align vertical both center. Make width fill parent and height 30%.

Duplicate the vertical arrangement by selecting it first and pressing Ctrl + C and Ctrl + V for Windows and Command + C and Command + V for MacOS. In the topmost arrangement, I will add a label that can contain our recipe or other information.

Now, our second vertical arrangement will contain our video but we need a web view for this. However, we can’t embed using the built-in webviewer of MIT App Inventor as that requires a url link but we want to provide HTML code. So, we need to download an extension. Hence, go to this link:

Click on the aix folder. Then, click on the aix file and then, click on the arrow button to download it.

Now, go back to MIT App Inventor, go to extensions, and click on import extension to import the aix file.


Drag and drop the customwebview from the 3 components onto the viewer. This component can be used to create multiple web views.


Now, go to the blocks section.

We want the video to start showing when the screen is initialized so get the screen1's initialize event.


First, we want to create a webview within our vertical arrangement2. We need to provide the container and also give an ID to this webview.


Next, we tell the custom webview component that our current webview is the one with ID = 1.


Last, we need to provide the HTML code for the current webview using a text block.


We can get the code for what comes inside the text block from YouTube itself. Open up the video you want to embed in the browser.

Click on share button.


Click on the embed button in the small window that opens up:

You can also choose a particular starting point for your video. You can also turn off player controls if you don’t want the user to forward or rewind the video or go to full-screen mode.
Click on the copy button under the code.


And paste this copied code inside the text block.


If you want to add more than one video on the same screen, you can use the same component.
Just go back to the designer view and duplicate the second vertical arrangement.

Come back to the blocks section.

And add those 3 procedures calls again for another webview with id: 2 within container vertical arrangement 3 and with html code for another video.

We are done with the basic embedding but you might have noticed that our video is showing in a pretty small frame. 
Yes, we have the option of watching it in full screen but only if we have turned on player controls. So, if you want to know how to fit your video nicely without going into full screen, please keep reading this tutorial to the very end.

We need to download another extension that will give us the size of the screen in pixels. The height and width that we get from Screen1’s properties give us the size in dp i.e. density-independent pixels and we need the actual pixels for the embedded YouTube video’s frame.

So, download this extension:


In MIT App Inventor, go to designer view and import the extension in your project. Drag and drop the Getmetrics component onto the viewer.

In the blocks section, make a global variable for height and width and initialize them to 0.
And use displaymetrics component to get the actual width of the screen in pixels.


Now, use this width to calculate the height for the YouTube video frame so that the aspect ratio stays 16:9.

The formula is height = (width/16)x9

At the end, we have to break down our HTML code and split the height and width elements so that we can provide custom width and height. So, add a join with five slots and plug in the global height and width accordingly.


So, you can see the difference:
The top video shows the YouTube-provided frame width and height and the bottom video uses the actual width of the phone’s screen to show the video without distorting the aspect ratio of the video.

I hope you liked this tutorial. If you like my work, please support me by buying me a cup of coffee by pressing the button below. Thank you in advance :)

Your support will encourage me to make more interesting and creative videos for you. 

You can also have a look at the video here:
Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.
Please like my social media pages for more educational resources and tips.
Pinterest:
https://www.pinterest.co.uk/obsidiansoft/_created/
For links to free educational apps, have a look at the educational apps page


Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h&
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing Group 1 (s, a, t,
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ
Read more