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 ($47/month or $399 one-time).

Already a member? Log in below or here.

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


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: