如何使用标题和描述制作iframe

Question

如何在视频下创建带标题和说明的iframe视频BUT标题和说明应与视频具有相同的宽度。你知道像普通视频（youtube ......）

我最大的问题是视频下的空间很大。

＆＃13;

＆＃13;

.archbody{
    display: flex;
    flex-direction: column;
}

.abtopvideo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 700px;
}

.abtopvideo h1 {
    color: black;
    
}

iframe {
    width: 50%;
    height: 50%;
}

＆＃13;

<div class="archbody">
        <div class="abtopvideo">
        <iframe allowFullScreen frameborder="1" height="400" mozallowfullscreen src="https://player.vimeo.com/video/251979190" webkitAllowFullScreen width="500">
       <p>See our <a href="news.html">newsflashes</a>.</p>
        </iframe>
        <h1>This is heading</h1>
        <p>This is description.This is description.This is description.This is description.
This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.</p>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

选中此http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/

.archbody{
    display: flex;
    flex-direction: column;
}

.abtopvideo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.abtopvideo h1 {
    color: black;
    
}

.fluidmediasize{
    width: 60%;
    height: 50;
}
.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="archbody">
        <div class="abtopvideo">
            
    
    
    <div class="fluidmediasize">
    <div class="fluidMedia">
            <iframe allowFullScreen frameborder="0" height="400" mozallowfullscreen src="https://player.vimeo.com/video/251979190" webkitAllowFullScreen width="500">
            </iframe>
        </div>
        <h1>This is heading</h1>
        <p>This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.</p>
        </div>
             </div>
    </div>