In your particular case, the responsive embed styles are conflicting with the embed container.
What’s Happening?
Surreal always adds a wrapper <div> around embedded content so it can identify videos and such and handle them correctly in the editor. The wrapper doubles as a way to style embeds consistently.
However, your responsive embed expects the <iframe> to be the first child of the .embed-responsive container, but Surreal has added its own container around the iframe. Because of that, the styles aren’t being applied correctly.
There are two ways to fix this.
Option 1: Adjust the HTML
This is the “harder” method, but it better explains what’s happening and how it can be fixed, so I’m putting it first.
I’d suggest removing the extra <div> to make things work properly. For example, here’s the first video from the original markup (indented for clarity):
<div class="col-md-4 col-sm-12">
<div id="gym-page-video-1" class="embed-responsive embed-responsive-16by9">
<div data-embed="true">
<iframe class="embed-responsive-item lazyload" src="img/lazyload-ph.png" data-src="https://www.youtube.com/embed/AibNEz22pxQ" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
<h6 id="gym-page-video-1-title" class="mg-md">LBF Testimonal</h6>
<p id="gym-page-video-1-description">A short video testimonial I did for Luke Bremner Fitness in 2015.</p>
</div>
Let’s remove the <div data-embed="true"> element and add data-embed="true" to the <div> above it instead:
<div class="col-md-4 col-sm-12">
<div id="gym-page-video-1" class="embed-responsive embed-responsive-16by9" data-embed="true">
<iframe class="embed-responsive-item lazyload" src="img/lazyload-ph.png" data-src="https://www.youtube.com/embed/AibNEz22pxQ" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<h6 id="gym-page-video-1-title" class="mg-md">LBF Testimonal</h6>
<p id="gym-page-video-1-description">A short video testimonial I did for Luke Bremner Fitness in 2015.</p>
</div>
Now you’ll see the first video appear and you’ll be able to edit it in Surreal 
Option 2: Adjust the CSS
If changing the HTML is inconvenient, you can do it through your stylesheet instead. This is the easier option, but it may conflict with other videos elsewhere on your website.
Use with caution and consider making the CSS selectors more specific to the page you want them to affect.
<style>
.embed-responsive-16by9::before {
padding-top: 0;
display: none;
}
div[data-embed] {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
div[data-embed]::before {
padding-top: 56.25%;
content: '';
display: block;
}
</style>
Once you’ve applied either fix, you’ll see your videos appear in the editor.
To edit the video, double-click on it or click once and select Video (or Embed in Surreal 5) from the toolbar. In both versions, you can:
- Paste embed code (from a share widget) or
- Paste a URL (from any oEmbed provider)
And Surreal will update the video for you.
