How to make iframe with heading and description

Question

How to create iframe video with heading and description under the video BUT heading and description should have same width as video. You know like normal video (youtube...)

My biggest problem is that big space under video.

.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%;
}

<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>

score 1 · Accepted Answer · 2018-02-02T21:38:33.213

Check this 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>

How to make iframe with heading and description

1 Answers1