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!

 

 

Advanced Adjustments

9. 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!

Finally, an open source option for associations. Fully functional. 100% customizable.

Give us a call: (281) 497-6567

captcha

Sign up for Tendenci

No per user pricing. Unlimited admins.

Demo Now

Still have Questions?

Contact us!

Site Search