Embed YouTube videos in iframes
With Studio.Design, you can use the Embed Box to display videos as your main visual or as a background. This guide explains how to embed a video published on YouTube into Studio.Design.
Learn about the basic usage of embedded boxes here.
Tips: You can upload videos in mp4 or webm format (up to 1GB per file) directly into the Studio.Design editor and place them right onto your page.
For more details, check out Video Box: Features and How to Use It.
Please note: Each Studio.Design plan has its own storage limits for files uploaded to the editor. Learn more about storage limits for each plan before uploading your videos.
Embedding YouTube Videos
You can embed uploaded videos to YouTube or Vimeo into your site.
In the box setting panel of the Youtube box, there is a video URL column.
https://www.youtube.com/watch?v=xxxx
Embed any video by entering the Youtube page URL.
* If you enter a URL in the format https://youtu.be/xxxx (the URL of the video itself), embedding will not work. Be sure to copy the URL of the play page from the address bar of the video page.
Auto & Loop Play
A YouTube video embedded simply by using the "Video URL" field will have a play button and a play bar.
A typical customization is to hide them in the embed code format so that the video plays and loops automatically.
To achieve this, replace the two parts of the xxxx with the ID of the video you want to embed (watch?v=xxxx in the URL) and enter the ID directly in the "Embed Code" field.
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxx?rel=0&controls=0&showinfo=0&autoplay=1&loop=1&playlist=xxxx&mute=true" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Due to Auto-play Restrictions by YouTube, Auto-play of YouTube videos won't work in all mobile environments.