Adding a responsive video to NetRanger

This video shows you how to add a responsive video from You Tube.

Watch on You Tube

Step 1 - find the video on youtube

Step 2 - copy the embed code from the "share" button into the NetRanger CMS

Step 3 - remove the width and height parameters

<iframe width="560" height="315" src="https://www.youtube.com/embed/XyNlqQId-nk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Step 4 - add the following class into the iframe code

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XyNlqQId-nk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Step 5 - Add the following code before the iframe code

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

Step 5 - Add the following code after the iframe code.

</div>