Javascript 这段代码（响应性html css js）有什么问题？

以下是JSFIDLE： 我想要实现的是在不破坏响应视频的情况下将其发送到右侧

<section id="full-video">
    <div class="video-wrapper">
        <div class="video-container">
            <iframe width="640" height="480" src="//www.youtube.com/embed/WeYsTmIzjkw?rel=0" marginheight="0" marginwidth="0" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</section>
<aside id="social" class="margin2">
   <a href="www.example.com" class="indiegogo" data-lang="en"><img src="img/indie.png" style='width:auto; max-width:200px;' border="0"></a>
   <a href="www.facebook.com/examplepage" class="fbgroup" data-lang="en"><img src="img/fbgroup.png" style='width:auto; max-width:200px;'></a>
   <div class="twitter-follow-button"><a href="https://twitter.com/arterast" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow</a></div>
   <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
   <div class="twitter-share-button"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a></div>
   <div class="g-plusone"></div>
</aside>

布局还行，右边是边线。但视频没有响应

当我将

更改为

（这里是小提琴：）…视频表现出响应性，但随后视频下会出现这种情况。。。 代码不是很好，但我正在努力提高自己，对此感到抱歉。 我缺少什么？

将

更改为

小提琴：

编辑
更改了节中某些子级的CSS

---

最后一把小提琴：

如果“响应”是指视频大小应根据浏览器窗口大小而改变，那么当您将包含的

尺寸固定为640 x 480时，您将很难做到这一点。您在CSS中所做的任何操作都无法覆盖内联固定尺寸。我知道，在我尝试

style=“display:inline block；width:100%；min height:550px；”

之前，没有边距，但仍然存在尺寸问题。现在，尺寸是自适应的，但除了这个问题，我无法发现它。你能做一把小提琴来为这件事指明出路吗？完成了，但仍然不能把它放在一边。不在视频的右边。嗯，让我看看。是的。干得好。这一段的孩子是个大块头，占了整条线。我改变了一些css。