Rich Editor Embeds - Vanilla Success
<main> <article class="userContent"> <p><strong>Rich Editor </strong>supports the embedding of external content within posts.</p><p>Embedding many content types is as simple as pasting the URL directly in the editor and pressing <strong>enter</strong>. Upon pressing enter, the editor will automatically transform the link into a rich content embed, as illustrated below:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/SVR07T43WDN5/embed-examples.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/SVR07T43WDN5/embed-examples.gif" alt="embed_examples.gif" height="476" width="840" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>✔️ TIP</strong>: Alternatively, you can insert embeds via the <strong>Insert Media</strong> button. Just click the button, paste the link in the provided field, and click <strong>Insert </strong>(or press enter). </p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/YZB1XJ04ZFYS/insert-media-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YZB1XJ04ZFYS/insert-media-button.png" alt="insert_media_button.png" height="402" width="836" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p><strong>🛑 IMPORTANT</strong>: While some sites offer different types of embed codes, unrecognized parameters may stop Vanilla from correctly parsing the URL. Use the methods below to ensure your content is correctly embedded.</p><h2 data-id="supported-embeds">Supported embeds</h2><p>Listed below are the media types you can embed in Rich Editor, along with an example of what each embed looks like.</p><h2 data-id="links">Links</h2><p>With links, Rich Editor fetches titles, descriptions, and images from the linked URL.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://success.vanillaforums.com/kb/articles/13</code></li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"The Rich Editor is Higher Logic Vanilla’s (Vanilla) default editor for formatting your posts and discussions. Upgrade to Rich Editor If you’re still using our Advanced Editor, you can enable the Rich Editor at any time. To do so: 1. Navigate to Dashboard > Settings > Discussion > Posting. 2. In the Post Format menu, select…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/13","embedType":"link","name":"Rich Editor - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/13" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/13 </a> </div><h2 data-id="twitter">Twitter</h2><p>Use the full URL of a tweet to embed it. Expanding a tweet in your timeline should provide the correct URL in your address bar. </p><p><strong>✔️ TIP</strong>: To embed a tweet from a thread, click the specific tweet's timestamp.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://twitter.com/vanilla/status/814160323867447296</code></li></ul><div class="js-embed embedResponsive" data-embedjson="{"statusID":"814160323867447296","url":"https:\/\/twitter.com\/vanilla\/status\/814160323867447296","embedType":"twitter"}"> <a href="https://twitter.com/vanilla/status/814160323867447296" rel="nofollow noreferrer ugc"> https://twitter.com/vanilla/status/814160323867447296 </a> </div><h2 data-id="youtube">YouTube</h2><p>To embed a video that will <strong>play from the beginning</strong>, copy its full URL and paste it into the editor:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://www.youtube.com/watch?v=JP0nFayBWIU</code></li></ul><div class="js-embed embedResponsive" data-embedjson="{"height":113,"width":200,"photoUrl":"https:\/\/i.ytimg.com\/vi\/JP0nFayBWIU\/hqdefault.jpg","videoID":"JP0nFayBWIU","showRelated":false,"start":0,"url":"https:\/\/www.youtube.com\/watch?v=JP0nFayBWIU","embedType":"youtube","name":"Higher Logic Vanilla: The #1 Choice for Community","frameSrc":"https:\/\/www.youtube.com\/embed\/JP0nFayBWIU?feature=oembed&autoplay=1"}"> <a href="https://www.youtube.com/watch?v=JP0nFayBWIU" rel="nofollow noreferrer ugc"> https://www.youtube.com/watch?v=JP0nFayBWIU </a> </div><p>To a embed a video and have it <strong>start at a specific time</strong>, use the following format:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://youtu.be/JP0nFayBWIU?t=50</code></li></ul><p>To retrieve this special embed URL, click the <strong>Share </strong>button, check the <strong>Start at</strong> box, enter a time, and then copy the URL.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/VMCKOV6K776C/youtube-specific-time.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/VMCKOV6K776C/youtube-specific-time.png" alt="YouTube_specific_time.png" height="622" width="688" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h2 data-id="vimeo">Vimeo</h2><p>Use the numerical ID for a Vimeo video:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://vimeo.com/31976384</code></li></ul><div class="js-embed embedResponsive" data-embedjson="{"height":360,"width":640,"photoUrl":"https:\/\/i.vimeocdn.com\/video\/276929472-56c445353d48e9b31e8a97b1d92e0f697573734673a52bdc6749be8782cb5be8-d_640","videoID":"31976384","url":"https:\/\/vimeo.com\/31976384","embedType":"vimeo","name":"Abstract crisp melt shapeshift","frameSrc":"https:\/\/player.vimeo.com\/video\/31976384?autoplay=1"}"> <a href="https://vimeo.com/31976384" rel="nofollow noreferrer ugc"> https://vimeo.com/31976384 </a> </div><h2 data-id="wistia">Wistia</h2><p>Wistia is a video-hosting website that focuses on the professional needs of businesses. Because Wistia videos have increased privacy settings, the process of embedding them is a bit more involved.</p><p>First, you want to find the project that you’d like to share from.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/076/K4YGISNAOZG5.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/076/K4YGISNAOZG5.png" alt="image.png" height="193" width="768" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>In that project, find the specific video that you’d like to embed in a post.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/170/Z531MZI1AK4D.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/170/Z531MZI1AK4D.png" alt="image.png" height="263" width="768" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Click on the video and copy the URL from the address bar.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/722/K38A2C21RE6E.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/722/K38A2C21RE6E.png" alt="image.png" height="429" width="768" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>You can also click on <strong>Video Actions</strong> and select the <strong>Social Sharing</strong> option from the list. That will give you this screen which also provides the full URL.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/908/867JZRVAN1AN.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/908/867JZRVAN1AN.png" alt="image.png" height="415" width="697" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>When you have the URL copied, go back to the post that you are writing and paste the link right into the body of the text - exactly where you want the video to appear.</p><p><strong>📝 NOTE</strong>: Wistia’s embed does not respect starting at a specific time. This is a limitation within the embed code from Wistia.</p><h2 data-id="other-video-embeds">Other video embeds</h2><p>Videos display as a large thumbnail. Once the play button is clicked, the video will play directly in the post. Rich Editor currently supports:</p><ul><li>Twitch</li><li>Kaltura</li></ul><h2 data-id="soundcloud">SoundCloud</h2><p>Both playlists and individual tracks will embed from SoundCloud when you insert a URL into a post.</p><p>This URL will start with the first song and then continue to play the contents of the set:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://soundcloud.com/lauramakesart/vanilla-silence</code></li></ul><p>This URL will play a specific track from the playlist. You can grab a specific track URL by clicking its name in the player at the bottom of your screen:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://soundcloud.com/lauramakesart/vanilla-silence?in=lauramakesart/sets/vanilla-example</code></li></ul><div class="js-embed embedResponsive" data-embedjson="{"trackID":"305490616","showArtwork":true,"useVisualPlayer":true,"url":"https:\/\/soundcloud.com\/lauramakesart\/vanilla-silence","embedType":"soundcloud","name":"Vanilla Silence by Lauramakesplaylists"}"> <a href="https://soundcloud.com/lauramakesart/vanilla-silence" rel="nofollow noreferrer ugc"> https://soundcloud.com/lauramakesart/vanilla-silence </a> </div><h2 data-id="mural">MURAL</h2><p>You can embed MURAL boards by inserting the board's embed URL into your posts.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://app.mural.co/embed/f68fa13f-5bf2-4c02-ba22-113f8a5a29a4</code></li></ul><p><strong>⭐️ EXAMPLE</strong>: Try it out! You can pan the board below by clicking and dragging and zoom in/out with your mouse wheel. You can also perform these actions by clicking the icon at the bottom right</p><div class="js-embed embedResponsive" data-embedjson="{"url":"https:\/\/app.mural.co\/embed\/f68fa13f-5bf2-4c02-ba22-113f8a5a29a4","embedType":"mural"}"> <a href="https://app.mural.co/embed/f68fa13f-5bf2-4c02-ba22-113f8a5a29a4" rel="nofollow noreferrer ugc"> https://app.mural.co/embed/f68fa13f-5bf2-4c02-ba22-113f8a5a29a4 </a> </div><h2 data-id="codepen">Codepen</h2><p>You can insert Codepen URLs into your posts to embed Pens.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">https://codepen.io/mrtairea/pen/yJapwv</code></li></ul><div class="js-embed embedResponsive" data-embedjson="{"height":300,"width":800,"name":"Simple JavaScript Chatbot","codePenID":"yJapwv","author":"mrtairea","url":"https:\/\/codepen.io\/mrtairea\/pen\/yJapwv","embedType":"codepen"}"> <a href="https://codepen.io/mrtairea/pen/yJapwv" rel="nofollow noreferrer ugc"> https://codepen.io/mrtairea/pen/yJapwv </a> </div><h2 data-id="other-embeds">Other embeds</h2><p>Rich Editor also supports:</p><ul><li>Giphy</li><li>Instagram</li><li>Getty Images</li><li>Brightcove</li></ul><h2 data-id="what-causes-the-warning-icon-while-inserting-a-rich-embed">What causes the warning icon while inserting a Rich Embed?</h2><p>Users attempting to embed content while using a browser with strict privacy settings or adblockers may not be able to load a Rich Embed from certain sites in their browser. The warning icon indicates that all the data necessary to render the embed is present in the editor, but the user’s browser is not allowing the embed to be created.</p><p>These embeds will be still be able to load for users with a more permissive browser, even on the same post.</p> </article> </main>