90 MINUTE CHALLENGE | AI WEBSITE COURSE

AI WEBSITES

VIDEOS

Paul Davenport

  Paul Davenport  |    04:35

Add Embed Videos and Background Videos to your website pages, hosted by Vimeo or YouTube. Though you don't need to loose valuable SEO and meta information with your videos. Create them as files so that the behave just like any other images or file, and even drop them in to you Widgets for Dynamic Content.

1. Embed and Background videos.

2. YouTube and Vimeo compatible.

3. Create videos as files for SEO and Dynamic Content.

   AI Website Transcript 

Similar to images, there are two Types of Video you can paste on your page. 

Embed Videos and Background Videos. 

And there are two main video platforms that MOBLE clients use for Videos, YouTube and Vimeo. 

To Embed a Video, click the Plus Icon in the Frame Tools and add a Video Component to your Page. 

Over in YouTube click 'Share' under your Video. 

Then click Embed, and Copy. 

Back over in MOBLE Paste in the code. 

On Vimeo. Click Embed, now very important you must “set custom dimensions” and if in doubt, set to 1920x1080. 

Plus also note. If your video is not Public. You must allow “specific domains” of pages where you will allow you video to be Embedded. 

So you should put your domain. AND so that you can see the video before your domain name is live, you should put your MOBLE sitename. 

Which is sitename.moble.site. Note, you don't need the www's. 

Back over in MOBLE Paste in the code. 

For Background Videos you should set a Fixed Height that you want to video to Display.

This is a cool feature as you could have background videos for the full Background or in specific shapes in the page. Fixed Height controls this. 

Next you should note that Videos don't play in the Page Editor, so it’s nice to have a Placeholder to tell your team there is a Video. Also, a placeholder ca be nice to have in the first milliseconds when the video loads.
For my Video Placeholder, I always like to use an Opacity Background Colour. 

Over in YouTube click 'Share' under your Video, and Copy the link.. 

Back on the Webpage Paste in the code.

On Vimeo. 

This time, click the Ellipsis in the Top Bar. 

Click Video File Links.

Then Click the Copy Link. 

I'll copy the link for 1080p, as I want my video to be full width on desktop, and large Desktops are 1920 x 1080 px. 

Back on the Page, Paste in the link.

Now, there is one more thing you can do with a Video, and that is to make the Video either pop up in a Lightbox window,
Or, appear in a Dynamic Content Feed such as Dynamic Video Libraries Like Netflix.
OR, It could be a video to support a Product, or News or Event Feed.
To do this, we want to make the Video a FILE.
So we go over to Files.
Click 'Add File' at the right of the Top Bar.
This time, we Paste the Embed Code for either YouTube or Vimeo.
Notice that the Destination URL has been automatically populated.
This is what makes the Video pop up when you click it.
Now, I can upload my Thumbnail.
And before you ‘Save’, make sure that the file type is set to 'Video'.

Finally, I will now tag the Video, in this case I'm going to tag my Video 'The Right Foot'.
Now, it’s been Tagged, I can put the Video on a Page as a Popup or into a dynamic content feed.
To do this, we use a Widget.
So, over in the Editor, click the Plus icon to add a Widget.
In the Widget Component, I can show ‘Videos’ with the Tags 'The Right Foot' and 'Reel'.
Then, I can set whether I want a Grid with Columns, a Masonry, a Carousel Multi-Slider, or a plain old Slider.
I could feed more content to the Widget, like Products, Images or other Pages, any content with the Tags will appear.
You can see how Widgets are Dynamic content bliss.
You can easily create websites like Netflix or the BBC in moments, simply by Tagging your content and managing them in Widgets.
So now let's move on to take a close look at Dynamic Widgets, so that you too, can easily manage dynamic content.

Course Quick Clips

70 Award
Winning AI Themes

Start your AI Website now
Start your AI Agency now

GETTING AROUND

GET A QUOTE

A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for AI development, custom website design, website development, ecommerce websites, directories, intranets and social networks.