Magento: Embedding YouTube Videos

Entering a YouTube video embed code in the File URL field of the Magento image insert content editor button creates some strange behaviour! You’ll see your own website showing within an iframe rather than the video you were hoping for. To embed the video properly, following these steps:

  1. Grab that Embed URL from YouTube by visiting the video, click the Share button, then Embed, then copy the embed code/iframe data
  2. Log in to your Magento admin, then navigate to the page where you wish to insert the video
  3. Choose the Content tab (if you’re not already on it) and click the video button from the toolbar. It usually looks like a little strip of film.
  4. Don’t do anything with the “General” tab and instead click on the “Source” tab. Paste in there the embed code from YouTube. You can then switch back to the “General” tab to preview the video if you wish, but it’s not necessary.
  5. Choose Insert and you’re all set!

You should now find the YouTube video properly embedded on your Magento page.

Looking for a high performance Magento host? Check out our Magento VPS options today!

Jordan is a computer, security, and network systems expert and a lover of all things web and tech. Jordan consults with project management for software companies. Jordan is a founder and managing partner at Websavers Inc.

9 Comments

  1. Vincent Nguyen on April 11, 2019 at 9:21 pm

    Hi Jodan,
    Thank you for your instruction to embed a Video, I did the same procedure with the same video but
    only work for some items but most items it does not work, please advise.
    Eg. (work)
    https://www.ofnetwork.com.au/toledo-typist.html
    https://www.ofnetwork.com.au/ergo-air-typist.html

    Eg. (do not work)
    https://www.ofnetwork.com.au/toledo-clerical.html
    https://www.ofnetwork.com.au/ergoair-clerical.html

    Thanks
    Vincent



    • Jordan Schelew on May 6, 2019 at 5:02 pm

      Hey Vincent, are all the videos YouTube sources? Are you using the same embed code (just different video ID)? is there anything in the server logs (provided by your hosting provider) to indicate why it’s refusing to embed? Does it just not save, or does all look well in the admin but nothing on the front-end?



  2. Aaron on December 14, 2018 at 12:10 pm

    Hi there,
    My videos are adding a single pixel to the right of the video causing a black line that isnt present on the Youtube specific version.
    Do you know how to rectify this?

    Example
    https://fostergrant.com/boba-fett-mmt



  3. Tom on October 12, 2018 at 11:47 am

    brilliant
    worked a treat for my site http://www.electricrideoncars.co.uk



  4. Tarun Nagar on June 14, 2018 at 10:44 am

    Great information! Add a video into your page is an interesting way to show customers about your products without boring text.



  5. Paris Baker on August 21, 2017 at 8:33 am

    Thx for the information!!!!



  6. Connor on August 7, 2017 at 5:53 pm

    I did exactly as you described and for some reason the video showed up in the preview but would not actually show up on the webpage.



    • Jordan Schelew on August 11, 2017 at 9:14 pm

      Hey Connor,

      If you don’t mind sharing the link to the page, we’d be happy to take a look! Feel free to also submit securely via ticket at https://clients.websavers.ca

      -Jordan