This members-only tutorial provides the steps to load and auto play a YouTube video inline when an image link is clicked.

We shall position a play button centered on top of a background image and set this up such that when the image is clicked anywhere, the image is removed followed by a loading animation before the video starts to play - using custom jQuery.

In this example, we shall add a Section containing a 2-columns component with a Heading and Text in the left column and the video portion in the right column.

Step 1

In the Oxygen editor, add a Section.

With the Section selected in the Structure panel, add a Columns component and then select 50 50 configuration.

a) Select the left Div and add Heading and Text components and change the text.

b) Select the right Div.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($27/month).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: