Bootstrapのmedia objectがレスポンシブにならない件

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

画面を小さくしていくと、media-body部分が消えてしまう。ので、解決方法をぐぐってみた。

他者の質問記事にすばらしい回答が貼り付けてあったので、やってみる。（←英語です）

【追記】
上の記事そのままではうまくいかなかったので、ハイブリッドな感じにしてみた。

【問題のコード】

         <div class="col-sm-12 col-md-12">
                <div class="media services-wrap wow fadeInDown">
                    <div class="pull-left">
                        <div >
                            <iframe width="853" height="480" src="https://www.youtube.com/embed/****" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">タイトル</h3>
                        <p>文章 </p>
                    </div>
                </div>           
            </div>

【うまくいったコード】

            <div class="col-sm-12 col-md-12">
                <div class="media services-wrap wow fadeInDown">
                    <div class="col-sm-12 col-md-9">
                        <div class="youtube">
                            <iframe width="853" height="480" src="https://www.youtube.com/embed/****" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <h3 class="media-heading">タイトル</h3>
                        <p>文章</p>
                    </div>
                </div>           
            </div>

CSS側：

.youtube iframe{

 width:100%;

}