How to Embed Assets
Through the CK Editor, you are able to embed forms, videos, and other forms of multimedia.
The CK Editor allows you to embed a snippet of code for embedding applications and multimedia from third-party software. To embed your code, you first need to switch the text format to "Full HTML":
When you switch to "Full HTML", you'll get a warning message. Just click "Continue" to proceed:
With Full HTML enabled, click on the "Source" link at the top right of the CK Editor. This allows you to go into the raw HTML of the CK Editor field:
At this stage, you'll need to copy and paste the embed code from your existing source. Most third-party applications will provide an option for copying the embed code for an interactive graphic, map, form, or some other form of multimedia.
For example, in YouTube, you find the embed code by clicking the "Share" button. You will often see a "Share" button in different types of software that does something similar:
After clicking the "Share" button, you'll see a number of different options for sharing the content. You want to pick "Embed":
When you click on "Embed", the software will provide you a snippet of code that you can copy and paste onto your site:
From here, all you need to do is copy that code and paste it into the CK Editor field.
Please note: Make sure you are pasting the code into the CK Editor field with the "Source" button clicked. That will allow you to paste the raw HTML into the CK Editor:
To check to confirm the embed code worked, click on the "Source" button again and you should see your embedded asset:
Good to know:
You can further adjust the code to your specific requirements. We often adjust the "width" to "100%", instead of a specific pixel width. The reason we do that is because it forces the asset to go to the full width of the section, and also makes it responsive to different screen sizes.
The end result looks something like this in the code:
We recommend making your embedded asset "100%" width whenever possible. You can also adjust the height to a specific pixel height to further adjust the aspect ratio.
Have feedback for this page? Let us know!
Last updated