Tutorial Poner un marco al bbCode YouTube

<style type="text/css">
#bbCodeYoutube pre, #bbCodeYoutube.Youtube {
  background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #a5cae4;
  border-radius: 5px;
  direction: ltr;
  display: block;
  font-family: Consolas,"Courier New",Courier,monospace;
  font-size: 10pt;
  line-height: 1.24;
  margin: 0 auto;
  max-height: 525px;
  max-width: 518px;
  min-height: 30px;
  overflow: auto;
  padding: 5px;
  word-wrap: normal;
}
#bbCodeYoutube .type {
  text-align:center;
  margin: 1em @messageInfo.margin-left 1em 0;
  border: 1px solid @primaryLighterStill;
  border-radius: 5px;
  overflow: auto;
  background: #176093 url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
  border-bottom: 1px solid @primaryLighter;
  color: #d7edfc;
  font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
}
#bbCodeYoutube { display: table-cell; margin: 0 auto; }
</style>
<div  id="bbCodeYoutube" class="Youtube">
  <div class="type">Youtube:</div>
  <pre><center><iframe width="560" height="315" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe></center></pre>
</div>