JMPv3.0 module | tubeplayer basic Tutorial

jorextensions.com free extensions for WYSIWYG Webbuilder
jordan (6j6)

tutorial for module | tubeplayer
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com

TUTORIAL module | tubeplayer - basic

Welcome to this tutorial for jor_aniMateMASTERPACKv3.0 ...

In this tutorial we will use module | tubeplayer to create a youtube player with basic external control
Module | tubeplayer can be found under the section 04. MODULES SECONDARY 2 in the extension

THE SELECTOR ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?

In this tutorial we are going to create a fullscreen youtube player with basic external control

Let's go ...

the container | selector

We first need to create a holder, a container, for our tubeplayer
Two WB objects can serve as container for the tubeplayer a WB Layer or Html object
The most obvious to use for module | tubeplayer is a Html object
In this tutorial we will use a Html object

container | selector = #Html1

We simply add a Html object to our project and add it's id to the   container | selector   input
In this tutorial the   Html object   id is   Html1
It's an id so we add a    #    in front of the id, the full selector becomes   #Html1

We have our container ready ...

fullscreen mode

We want a fullscreen youtube display ...

response | mode = auto fullscreen

basic external control

Last we need to add the objects for the basic external control

control | play              =   #wb_play
control | stop              =   not used
control | pause             =   #wb_stop
control | mute              =   #wb_mute

The control inputs are selector inputs, so we follow the same steps as the above container | selector

"The same steps for any selector input for that matter"!

The most obvious objects to use here are WB Image objects

We simply add the WB Image objects to our project and add there ids to the control inputs

In this tutorial ...

the Image object id is play for the play button

the Image object id is stop for the pause button

the Image object id is mute for the mute button

It's an id so we add a # in front of the ids

We also add a wb_ prefix in front of the ids

We do this because if a hover state is enabled on an Image object the target must become the outer element

In this tutorial the Image objects do not have a hover state enabled, but it is good practice to do so anyway

The full selectors for the Image objects therfore become #wb_play - #wb_stop - #wb_mute

That's all the inputs we have to set
All other inputs of module | tubeplayer are optional and for styling purpose

We can also set module | tubeplayer up into another mode ...
In which we control the position and dimension of the tubeplayer ourself
For this we have to change the response | mode input

response | mode = not used

That's the only change we have to make, all other settings remain the same as used in Tutorial 1

That's the full youtube player with basic external control tutorial completed

What is jor_aniMateMASTERPACKv3.0 ?

jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless

Download the demo's of the above tutorials here as WB project ...

module | tubeplayer is a module of jor_aniMateMASTERPACKv3.0 build 5 • 2009 - 2015

more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)

Hope you found these tutorials informative and useful ...
Module | tubeplayer can be used in many other setups and other advanced options can be created
These demo's should be a good start point to experiment with

Online Manual
Online Manual - module | tubeplayer
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?

Module | tubeplayer full demo
WYSIWYG Webbuilder Forum Topic JMPv3.0

More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com

Back To Top

For this we simply set the response | mode input to auto fullscreen

Note that although the container in auto fullscreen mode automatically sets a position and dimension,

we still need to add a container for our tubeplayer

That's the full fullscreen youtube player with basic external control tutorial completed

The response | mode is simply set to not used
The Html1 object used as our container will now set the position and dimension of the tubeplayer

NOTE
This container is used to set the position and dimension of the tubeplayer

NOTE:
This is why a Html object is the most obvious WB object to use as container for module | tubeplayer
A Html object does not have a background-color or border etc set in default state
If ie. a Layer would be used as container the Layer could briefly be seen before the tubeplayer initializes

Level: Easy

module | tubeplayer - basic - tutorial

Tutorial 1

Fullscreen youtube w/ basic external control

Tutorial 2

Normal youtube w/ basic external control

TUTORIAL
jor_aniMateMASTERPACKv3.0 b5
module | tubeplayer

SEE LIVE DEMO 1

SEE LIVE DEMO 2

DOWNLOAD DEMOS

Comments, feedback etc regarding this tutorial please post them at the WB Forum Topic JMPv3.0 ...

jordan (6j6)

UPDATE: jor_aniMateMASTERPACKv3.0 build 5.2 update **NEW IMPORTANT**

From JMPv3.0 build 5.2 on the new extension jor_aniMateLIMITER is required to run module | tubeplayer
Read more about jor_aniMateLIMITER - Here