This tutorial will show you how to embed an iframe on a screen block by using the webview control. We'll be using a YouTube video as it's one of the most common used features as far as embedding is concerned in our platform. 


Preparing your iframe


  1. We'll start with finding a suitable iframe. In this example we'll be using a YouTube video. 
  2. Once you've found your video, click on the "Share" button, then "Embed": 
  3. Copy the code and paste it into your favorite text editor. Check whether all settings are correct. For example the width and height of the video. I'll be changing it to width="320" and height="180":
  4. Next you'll need to copy the edited code and paste it into an encoder. We like to use this one. Encode the HTML:


Creating your screen block and webview control


  1. Open your app in AppMachine and add a new screen block through the "+ Block" button. You'll find it under the "Pro" tab. 
  2. Open your newly created screen block and drag/drop a webview control in the layout: 
  3. Select your webview control and paste the encoded HTML code in the HTML field: 
  4. After pasting the encoded HTML the field will look something like this: 
  5. And there we go:


You may have to make some adjustments to the positioning of your webview component. For example I've given it a fixed width of 320 pixels and set the gravity to "center" to make sure the video is centered. 


Any questions regarding this setup can be sent to support@appmachine.com.