Embed YouTube video into a SKUID Page

edited December 2019 in Questions
Is it possible to embed a YouTube video into a SKUID page?  I tried using a Template with an iframe, no luck there. 

How would this best be accomplished? 

I am just getting started with SKUID.


Comments

  • edited July 2019
    Figured it out using a custom component - looks something like this:

    1. Created JavScript Resource - Named introVideo

    skuid.componentType.register('introVideo',function(element){
        element.css('width','600px').css('height','400px');
        element.html(
             '<iframe width="600px" height="400px" src="YOUTUBE VIDEO URL"; frameborder="0" allowfullscreen></iframe>'
        );

    });

    2. Added Custom Component with ComponentType set to introVideo

    Seems to work,  Not sure if that was the correct approach, but its working.
  • Anna WiersemaAnna Wiersema Skuid Mod, Admin 🛠️ 
    edited December 2019
    Hey Jason, that's so cool that you made a custom component!  It should also work with a template in an iframe, make sure you check "allow HTML" for your template. I just got it to work via a template, so let me know if you are still having problems. I used the embed html provided by youtube:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/fh0NLQJfAYU" frameborder="0" allowfullscreen></iframe>
  • Irvin WaldmanIrvin Waldman Member
    edited May 2019
    Issue may have been that you were using HTTP instead of HTTPS?
    <skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true">   <models/>
       <components>
          <template multiple="false" model="" allowhtml="true">
             <contents>&lt;object data="https://www.youtube.com/embed/uVD3KPUnKHk";
       width="560" height="315"&gt;&lt;/object&gt;</contents>
          </template>
       </components>
       <resources>
          <labels/>
          <javascript/>
          <css/>
       </resources>
    </skuidpage>
  • sam jonassam jonas Member
    edited May 2019
    Thank you for showing it like a tutorial
  • edited July 2019
    Thanks a lot!!!
  • edited July 2019
    okay cool

  • edited July 2019
    I will try this. Thanks for the Custom Component
Sign In or Register to comment.