This tutorial provides the steps to autoplay a YouTube video in a modal in Oxygen.

Step 1

In Oxygen editor, add a Modal component.

Add a Video component inside the Modal.

Tick "Manually Paste Iframe Code".

Paste the YouTube video embed code.

Ex.:

<iframe width="560" height="315" src="https://www.youtube.com/embed/d0tU18Ybcvk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Add `?autoplay=1` after the video URL.

Ex.:

<iframe width="560" height="315" src="https://www.youtube.com/embed/d0tU18Ybcvk?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Make sure you set the Trigger for the modal.

That's it!

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.
  • Hi Sridhar,

    I'm having a bit of trouble with this. The autoplay works but upon closing of the modal, the video audio can still be heard. I tried with YouTube, Vimeo and even self-hosted .mp4 files. If autoplay is set on any of these formats, they all continue playing after the modal is closed.

    I've settled on not using autoplay with vimeo iframe embed. In the case of the video in the link below, I'd actually prefer to use the self-hosted .mp4, as it's only 42 seconds long.

    Any ideas?

    http://tustg.wpengine.com/

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: