Contact Us Now (281)497-6567  Tendenci temp hours Mon-Thur, 9-3 CST. Closed Fri. Tips for business continuity.

The Easy Way

1. Upload your video to YouTube

2. Click on the "Share" Button

click share youtube tendenci

3. In the "Share" screen, click on "Embed"

click embed youtube tendenci

4. Copy the Code block on the Embed Screen

copy this block youtube tendenci

5. Paste into the code editor in the Tendenci content you'd like to include it in!

paste youtube code block here on tendenci


The Responsive Way

The above instructions will get you up and running quickly.  Want to improve your code?  You can make your video responsive by editing just a little bit of the above snippet.

Please follow the instructions from "The Easy Way" then begin the following:

 

5. Remove the width and height parameters from the existing code block.

<iframe width="560" height="315" src="https://www.youtube.com/embed/K9wYngS6NnE" frameborder="0" allowfullscreen></iframe>

 

6. Add the responsive class below:

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/K9wYngS6NnE" frameborder="0" allowfullscreen></iframe>

 

7. Wrap the code in the following div:

<div class="embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/K9wYngS6NnE" frameborder="0" allowfullscreen></iframe>

</div>

 

8. Save your page!

 

Using Text Editor's Media Tool

To start off simply copy the YouTube video's URL found in the address bar then do the following steps:

10. Go to the very top of the editor tool bar and select "Insert" then select "Media"

Insert Media

11. Paste the YouTube URL you copied in the address bar into the "Source" and click OK. Note that clicking Embed tab after you paste in full URL the code becomes converted to an iframe.

Tendenci screenshot of editor toolbar pasting URL

12. OR you can paste the YouTube embed code when you click "Embed" tab then click OK.

Tendenci's text editor Embed tab shows iframe code 

 

Advanced Adjustments

13. You can adjust the width of the video by wrapping it inside another div and giving it the style="width: X%;" or if you're familiar with Bootstrap, you can use the columns and rows classes in Bootstrap 3.

<div style="width:50%">

<div class="embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/K9wYngS6NnE" frameborder="0" allowfullscreen></iframe>

</div>

</div>

 

 

Contact us to upgrade to Tendenci

The open source solution chosen by associations around the world.

Want to talk? (281) 497-6567

Sign up for Tendenci - The Open Source AMS

No per user pricing. Unlimited admins.

Demo Now

Have Questions?

Contact us!

Site Search