Featured Video

The Featured video is a simple container that loads a YouTube or Vimeo video. You can even load your own server side video.

Tips


Instructions

Featured Video

In this tutorial, we’ll demonstrate how to replace the Featured video. The Featured Video is a single YouTube video, but you can easily replace it with a Vimeo video, or even your own locally hosted video ( although ‘thats’ not so easy! )

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, just right click on the placeholder image, and select Open file:/// .. your Library page will open, and you can quickly edit the content.

  1. First, locate the component placeholder in your page.
  2. Right click on the placeholder and select ‘Open file:///…’
  3. You components Library page will open in a new window, ready for editing.

 

One of the reasons we provided a YouTube video for the Featured Video component was it’s ease of use. Copy code from YouTube, paste into page.. done .. When replaing with Vimeo, it’s pretty much the same copy and paste. When using your own locally hosted video.. it gets a bit more complicated as you would need to first convert your video into the following formats

  • .mp4
  • ogg
  • webm

Not all web browsers will play mp4 video. YouTube and Vimeo do a great job of streaming the appropriate video format, therefore you only need to embed an ‘iframe’ link, the video is actually being streamed from the YouTube of Vimeo websites. When doing this yourself, you need to embed a video player, and embed all 3 video formats. Let the browser decide which format will work best.

Removing the Featured Video component.

You can remove the Featured video by selecting the Featured Video component in your page while in Design view, and deleting.

  1. Open the page with the Featured Video Component.
  2. Locate in Design View.
  3. Click on the Component placeholder ( featured video ) with your mouse to select it, THEN click on the ‘<div.featured-vide…> tag in the ‘Quick Tag Selector’ toolbar.
  4.  .
  5. Press the Delete key on your keyboard.

To learn more about deleting Library components from your page, check out our tutorial here.

Replacing the YouTube Video

Video Demonstration: Featured video update
http://youtu.be/qfo4WtbXSnA
Watch our Video demonstration on replacing your Video component!

  1. Expand the Library / components / featured-video (folder).
  2. Double click on the ‘featured-video.htm’ page to open.
  3. Switch to Code view.
  4. You’ll see the YouTube video link.
  5. Replace this link with a new link copied from the YouTube Website.
  6. Find your YouTube video page.
  7. Click the ‘Share’ button.
  8. Click the ‘Embed’ button.
  9. Select and Copy the <iframe…>… </iframe>
  10. Paste this copied <iframe… into your ‘feauted-video.htm’ page, in place of the default <iframe.. > link. It’s easiest to do this by first selecting the existing <iframe.. > link.
  11. Right click, and Paste the new <iframe..> code.
  12. Once you’ve pasted the new <iframe> code, just change the ‘height’ and ‘width’ properties to 100%:

Watch the video demonstration for complete details.

Replacing with a Vimeo Video

  1. Login into your Vimeo Video account.
  2. Locate the video you want to embed.
  3. Locate the ‘share’ button.
  4. Select the ‘iframe’ code, and copy.
  5. Expand the Library / components / featured-video (folder).
  6. Double click on the ‘featured-video.htm’ page to open.
  7. Switch to Code view.
  8. You’ll see the YouTube video iframe and link.
  9. Replace the YouTube iFrame link with a new link copied from the Vimeo website.

Watch our Video demonstration on replacing your YouTube video with a Vimeo video.

Replacing with your own locally hosted video.

Watch our video on using your own video.

It’s important to NOTE: when testing locally hosted video, your video will need to be on your server, and you’ll need to test from your live website. Most HMTL5 video players will not play video from your computer, the video much be on your server, and you must be viewing your LIVE website to test.

You’ll first need to convert your video into the following formats:

  • mp4
  • webm
  • ogg

To do this you’ll need some video conversion software, or an online service. You may want to try ..

www.zencoder.com

http://www.online-convert.com/

It may not be free either, depending on how larger your video files are.

Once converted, import the video files into your website just as you would import an image file, or any other type of file.

Now you’ll need to replace the iFrame used for the YouTube video, with an actual HTML5 video player. If you attempt to add video directly to the web page, and not embed it through some sort of player, your visitors will not have any means to control the video, such as start, stop, pause, fullscreen or change the volume.

Thankfully, we have HTML5 which provide the <video> tag, as well as the ability to display control through the video tag! Yeah! less stuff to copy.

To learn more about the video tag,check this tutorial out.

Here’s some simple video code you can start with…

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

You’ll need to adjust the height and width of the video container to suit your page, but 320 is a pretty good starting place. You’ll also want to update the link to the video files. If you placed your video files into the same folder as the ‘featured-video.htm’ page, you won’t need to fuss with folder depths, just change the video file name, and make sure your video file names are ‘web friendly’ as in:

  1. all lower case, including the file extension ( .mp4  and not .MP4 ).
  2. no punctuation in the file name as in ( video {1} .mp4)
  3. no spaces in the file name ( connect words with a hyphen – or an underscore _ ) as in ( my-new-video.mp4 or my_new_video.mp4).

Featured Video

In this tutorial, we’ll demonstrate how to replace the Featured video. The Featured Video is a single YouTube video, but you can easily replace it with a Vimeo video, or even your own locally hosted video ( although ‘thats’ not so easy! )

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, press and hold the ( Alt ) key on your keyboard, while you click on the ‘pladeholder’ image, then click on ( featured-video.lbi ) .. your Library page will open, and you can quickly edit the content.
Video Demonstration: Featured video quick edit
http://youtu.be/o92zZHaPQkc

 

One of the reasons we provided a YouTube video for the Featured Video component was it’s ease of use. Copy code from YouTube, paste into page.. done .. When replaing with Vimeo, it’s pretty much the same copy and paste. When using your own locally hosted video.. it gets a bit more complicated as you would need to first convert your video into the following formats

  • .mp4
  • ogg
  • webm

Not all web browsers will play mp4 video. YouTube and Vimeo do a great job of streaming the appropriate video format, therefore you only need to embed an ‘iframe’ link, the video is actually being streamed from the YouTube of Vimeo websites. When doing this yourself, you need to embed a video player, and embed all 3 video formats. Let the browser decide which format will work best.

Removing the Featured Video component.

You can remove the Featured video by selecting the Featured Video component in your page while in Design view, and deleting.

  1. Open the page with the Featured Video Component.
  2. Locate in Design View.
  3. Click on the Component title ( Featured Video ) with your mouse to select it. ( you won’t see the actual video in the Design mode, just the title ).
  4. Press the Delete key on your keyboard.

To learn more about deleting Library components from your page, check out our tutorial here.

Replacing the YouTube Video

Video Demonstration: Featured video update
http://youtu.be/A_3KTQI3teQ 
Watch our Video demonstration on replacing your Video component!

  1. Expand the Library / components / featured-video (folder).
  2. Double click on the ‘featured-video.htm’ page to open.
  3. Switch to Code view.
  4. You’ll see the YouTube video link.
  5. Replace this link with a new link copied from the YouTube Website.
  6. Find your YouTube video page.
  7. Click the ‘Share’ button.
  8. Click the ‘Embed’ button.
  9. Select and Copy the <iframe…>… </iframe>
  10. Paste this copied <iframe… into your ‘feauted-video.htm’ page, in place of the default <iframe.. > link. It’s easiest to do this by first selecting the existing <iframe.. > link.
  11. Right click, and Paste the new <iframe..> code.
  12. Once you’ve pasted the new <iframe> code, just change the ‘height’ and ‘width’ properties to 100%:

Watch the video demonstration for complete details.

Replacing with a Vimeo Video

  1. Login into your Vimeo Video account.
  2. Locate the video you want to embed.
  3. Locate the ‘share’ button.
  4. Select the ‘iframe’ code, and copy.
  5. Expand the Library / components / featured-video (folder).
  6. Double click on the ‘featured-video.htm’ page to open.
  7. Switch to Code view.
  8. You’ll see the YouTube video iframe and link.
  9. Replace the YouTube iFrame link with a new link copied from the Vimeo website.

Watch our Video demonstration on replacing your YouTube video with a Vimeo video.

Replacing with your own locally hosted video.

Watch our video on using your own video.

It’s important to NOTE: when testing locally hosted video, your video will need to be on your server, and you’ll need to test from your live website. Most HMTL5 video players will not play video from your computer, the video much be on your server, and you must be viewing your LIVE website to test.

You’ll first need to convert your video into the following formats:

  • mp4
  • webm
  • ogg

To do this you’ll need some video conversion software, or an online service. You may want to try ..

www.zencoder.com

http://www.online-convert.com/

It may not be free either, depending on how larger your video files are.

Once converted, import the video files into your website just as you would import an image file, or any other type of file.

Now you’ll need to replace the iFrame used for the YouTube video, with an actual HTML5 video player. If you attempt to add video directly to the web page, and not embed it through some sort of player, your visitors will not have any means to control the video, such as start, stop, pause, fullscreen or change the volume.

Thankfully, we have HTML5 which provide the <video> tag, as well as the ability to display control through the video tag! Yeah! less stuff to copy.

To learn more about the video tag,check this tutorial out.

Here’s some simple video code you can start with…

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

You’ll need to adjust the height and width of the video container to suit your page, but 320 is a pretty good starting place. You’ll also want to update the link to the video files. If you placed your video files into the same folder as the ‘featured-video.htm’ page, you won’t need to fuss with folder depths, just change the video file name, and make sure your video file names are ‘web friendly’ as in:

  1. all lower case, including the file extension ( .mp4  and not .MP4 ).
  2. no punctuation in the file name as in ( video {1} .mp4)
  3. no spaces in the file name ( connect words with a hyphen – or an underscore _ ) as in ( my-new-video.mp4 or my_new_video.mp4).