The Easy Way
1. Upload your video to YouTube
2. Click on the "Share" Button
3. In the "Share" screen, click on "Embed"
4. Copy the Code block on the Embed Screen
5. Paste into the code editor in the Tendenci content you'd like to include it in!
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"
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.
12. OR you can paste the YouTube embed code when you click "Embed" tab then click OK.
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>