Необычная легенда

Question

Я пытаюсь html'у определить дизайн, в котором видео имеет рамку вокруг него, а на границе заголовок. Идеальный способ сделать это с помощью fieldset и legand tag, однако мне нужно увлечься стилем, у кого-нибудь есть идеи, как этого добиться, поддерживая совместимость с ie7+, firefox и chrome??

Слава 1:

Кадр 2:

Answer 1

Вы можете сделать что-то вроде этого - ДЕМО

HTML

<div class="wrapper">
    <div class="content">
        <h2> Some lorem ipsum text title </h2>
    </div>
</div>

CSS

.wrapper {
    margin: 25px;
    background: #000;
    height: 300px;
    padding: 5%;
}

.content {
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}

h2 {
    color: yellow;
    font: bold 16px sans-serif;
    display: inline-block;
    padding: 0 25px;
    position: relative;
    top: -12px;
    background: #000;
}