Embed a Vimeo Video

To embed a video on a page from Vimeo, first of all find the Vimeo video ID for the video you wish to embed. If you’re looking at the video in your web browser, then you can easily find the video ID from your address bar:

 

Now simply copy the following embed code in to an HTML module on a page in the CMS:

<!DOCTYPE HTML>
<html>
<head>
<title>Vimeo Embed</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-video-container
{ position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.tabweb-video-container iframe
{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
</style></head>
<body><div class="tabweb-video-container"><iframe src="https://player.vimeo.com/video/248293269" width="100%" height="600px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></body>
</html>

Then replace the example Vimeo ID here (shown in red italics), with the one for your own video.

With this in an HTML module on your page, press Save and Publish.

Please note – if you’re trying to embed a Vimeo video that is set to to private, you may have to choose to allow for the video to be embedded in our CMS in the Vimeo settings.

Embed an animated GIF from Giphy.com on a page

You can embed an animated GIF on a page. Giphy is the mos popular source on the web for animated GIFs.

On Giphy.com, click on the GIF that you want, then click on embed:

 

In the embed code that appears, there’s only one part of if that you want, which is the actual https link to the GIF. So copy the embed code in to a notepad file:

 

The only part of the giphy embed code that you’re interested in, is the part highlighted below, after src=”

 

Copy the below embed code in to an HTML module on your page in the CMS, but replace the red example link here, with the giphy link.

<!DOCTYPE HTML>
<html>
<head>
<title>GIF</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-video-container
{ position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.tabweb-video-container iframe
{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
</style></head>
<body><div class="tabweb-video-container"><iframe src="https://giphy.com/embed/1hAY6PJUCjMZiNjvuo" frameborder="0" allowfullscreen></iframe></div></body>
</html>

Finally, click Save and Publish, and your giphy GIF will be embedded within the page on the app:

Embedding Youtube Videos

With the addition of our media library, you can upload your own videos within modular pages, meaning that you can rely less on third party video services such as YouTube. Should you need to however, it’s still possible to embed YouTube videos. This is done in the HTML module on a modular page.

1. Add an HTML module on a modular page. If you’re not sure how to do so, please read the guide on modular pages.

2. Copy all of the following HTML code in to your HTML module:

<!DOCTYPE HTML>
<html>
<head>
<title>Document Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-video-container
{ position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
.tabweb-video-container iframe
{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
</style></head>
<body><div class="tabweb-video-container"><iframe src="https://www.youtube.com/embed/g1mUNUDAfHY" frameborder="0" allowfullscreen></iframe></div></body>
</html>

3. Find the YouTube video ID for the video you wish to embed, and replace the example ID g1mUNUDAfHY in the HTML code that you have copied in to the HTML module. This YouTube ID can be found in the URL for the video, after the = symbol. For example:

 

4. The YouTube video ID has been highlighted in the address bar above. Click on Save & Close or Save & Publish, to publish your content.

The YouTube video will now be embedded on your page, as per below:

Embed a Twitter Feed or Timeline

Embedding a Twitter Timeline

You can also embed a twitter timeline for a user. This might be useful instead of using a ‘Web’ widget to link to your company’s Twitter page. Embedding your company’s Twitter timeline inside the app rather than linking it as external content gives your user a better, smoother experience.

  1. Navigate to the Twitter timeline that you want to embed, and copy the user URL. In the example here, we’re embedding TheAppBuilder’s Twitter timeline, so the URL we’re looking for is https://twitter.com/theappbuilder. This will be your own company’s Twitter URL:

 

2. Copy the following HTML code:

<!DOCTYPE HTML>

 <html>

 <head>

 <title>Twitter Feed</title>

 <meta name="viewport" content="width=device-width,initial-scale=1" />

 <style>body { margin: 0; }</style>

<script src="https://platform.twitter.com/widgets.js"></script>

</head>
 <body>

<a data-chrome="nofooter" class="twitter-timeline" href="https://twitter.com/theappbuilder" data-dnt="true" ></a>

</body>
 </html>

 

3. Paste the HTML code in to the HTML module on your modular page, and replace the twitter url with the url that you require (highlighted in red in the above HTML code):

Now click Save and Publish.

On the mobile device, this will look as follows. You now have a live twitter feed embedded in to your app, giving a much more fluid user experience than simply linking to the external content:

 

Embed Maps from Google Maps

Embedding Google Maps

It’s possible to embed Google Maps on a modular page to demonstrate the location of one of your businesses sites, or the location of a company event. As with all embedding of external web content, this is done using the HTML module on a Page.

Start by navigating to https://maps.google.com and searching for the location or area that you require:

Now on the menu on the left, click on ‘Share’

 

 

 

 

 

 

 

 

In the box that pops up, select the ‘Embed Map’ Tab, then copy the embed code:

 

 

 

 

 

 

 

 

 

Open Notepad, then paste the embed code in to Notepad:

 

 

Now delete everything apart from the link (everything before https and everything after the link itself – as highlighted below)

 

 

Leave that aside for now, and copy the following HTML code in to an HTML module on your page in the CMS:

<!DOCTYPE HTML>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-container
{ overflow:scroll; }
</style></head>
<body>
<div
class="tabweb-container"><iframe
src="MAP EMBED LINK GOES HERE"
width="100%" height="500px"
frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe></div>

</body>
</html>

Now copy your link from Notepad in to the HTML code in the CMS, where MAP LINK GOES HERE is highlighted in red above. Ensure that you copy your link within the speech marks.

The HTML module on your page should look as follows:

 

 

 

 

 

 

 

 

Now click save and publish to see your map embedded on the page in your app: