Adding Responsive Video to Slide Out Panel Magic A Responsive Slide Out Panel Maker for Dreamweaver

Buy Now ($95) | User Guide | Examples

How to display videos

Open Example Video Panel Now...

1. Locate your SOP Content Panel in Design View

The content panel will be near the bottom of your page in Design View. If you have not yet edited the content, it will look like this:

Slide-Out Panel 1

Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te. Solum affert expetenda eos te, et vim sale iudico impetus, in appetere postulant ius. Alia nihil utroque ex sit.

Place your cursor inside the content and switch to code view:

<div class="sop-content">
<h2>Slide-Out Panel 1</h2>
<p>Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te. Solum affert expetenda eos te, et vim sale iudico impetus, in appetere postulant ius. Alia nihil utroque ex sit.</p>
</div>

Place your cursor on the beginning of the line that holds the closing DIV tag for your sop-content DIV (</div>) and press ENTER to create a new line between the content paragraph and the closing DIV tag:

<div class="sop-content">
<h2>Slide-Out Panel 1</h2>
<p>Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te. Solum affert expetenda eos te, et vim sale iudico impetus, in appetere postulant ius. Alia nihil utroque ex sit.</p>
[new line]
</div>

2. Add a Video-Wrapper DIV

Add a DIV on the new line and assign it a class of video-wrapper:

<div class="sop-content">
<h2>Slide-Out Panel 1</h2>
<p>Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te. Solum affert expetenda eos te, et vim sale iudico impetus, in appetere postulant ius. Alia nihil utroque ex sit.</p>
<div class="video-wrapper">

</div>
</div>

3. Add Your Video Code

Add the iframe embed code from your YouTube or Vimeo video into the new video-wrapper DIV:

<div class="sop-content">
<h2>Slide-Out Panel 1</h2>
<p>Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te. Solum affert expetenda eos te, et vim sale iudico impetus, in appetere postulant ius. Alia nihil utroque ex sit.</p>
<div class="video-wrapper">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/KZSyGCIBDEs?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

4. Add the CSS to your CSS file

The following 2 CSS rules need to be added to one of your CSS files. We recommend placing it in your Slide Out Panel Magic CSS file: p7SOP-01.css, located inside your p7sop folder.

Open p7SOP-01.css and scroll down toward the bottom. The last rule in the file is a media query:

@media only screen and (min-width: 0px) and (max-width: 600px) {
.p7SOP { max-width: 100% !important; }
}

Make a new line above the media query and add the video-wrapper CSS rules:

.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0px;
overflow: hidden;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

That's all there is to it.

Invest in a tool that will pay for itself over and over

PVII Slide Out Panel Magic is an indispensable tool that will make your job and your life a lot easier.