revision:
The <iframe> tag specifies an inline frame that is used to embed another document within the current HTML document. It is a good practice to always include a "title attribute" for the <iframe>, which is used by screen readers to read out what the content of the <iframe> is. Use CSS to style the <iframe>.
allow : specifies a feature policy for the <iframe>.
allowfullscreen : value: true, false;
set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method .
allowpaymentrequest : value: true, false;
set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API.
height : value: pixels;
specifies the height of an <iframe>. Default height is 150 pixels.
loading : value: eager, lazy;
specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met.
name : value: text;
specifies the name of an <iframe>.
referrerpolicy : value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url;
specifies which referrer information to send when fetching the iframe
sandbox : value: allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation;
enables an extra set of restrictions for the content in an <iframe>.
src : value: URL;
specifies the address of the document to embed in the <iframe>.
srcdoc : value: HTML code;
specifies the HTML content of the page to show in the <iframe>.
width : value: pixels;
specifies the width of an <iframe>. Default width is 300 pixels.
<iframe src=" " width=" " height=" "> . . . . . . . </iframe>
For examples, see: "HTML-09-iframe.html" under "tutorials" and "iframe.html" under "topics".
<div class="flex-container">
<iframe class="one" src="../../images/Wuzhen-20-10_01.mp4" frameborder="2"></iframe>
<iframe class="two" src="../../images/Wuzhen-20-10_01.mp4" height="300" width="300"></iframe>
<iframe class="three" src="../../images/Wuzhen-20-10_01.mp4" height="20%" width="20%"></iframe>
<iframe class="four" height="300" width="300" src="../../images/Wuzhen-20-10_01.mp4" style="border:none;"></iframe>
</div>
<style>
.flex-container{display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 90vw;height:70vh;}
.one1{ margin: 1vw; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 1vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform:rotate(20deg); transform:rotate(20deg);}
.two1{ margin: 1vw; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 1vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); -ms-transform:rotate(-20deg); transform:rotate(20deg);}
.three1{ margin: 1vw; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 1vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); -ms-transform:rotate(5deg); transform:rotate(20deg);}
.four1{ margin: 1vw; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 1vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform:rotate(20deg); transform:rotate(20deg);}
</style>
<div class="resp-container">
<iframe width="450" height="220" class="if" src="../../images/ducks.gif" title="ducks crossing the street" allowfullscreen></iframe>
<iframe width="235" height="170" class="if" src="../../images/gif2.gif" title="don't play with the duck" allowfullscreen></iframe>
<iframe width="450" height="250" class="if" src="../../images/gif1.gif" title="look out" allowfullscreen></iframe>
<iframe width="320" height="260" class="if" src="../../images/gif3.gif" title="dog answering the door" allowfullscreen></iframe>
</div>
<style>
.resp-container { display: inline-block; position: relative; overflow: hidden; width: auto; height: auto;}
iframe .if{display: inline-block; border: 0.5vw double burlywood; }
iframe .if{ margin: 2vw; -moz-border-radius: 12px; -webkit-border-radius: 10px; border-radius: 12vw; -moz-box-shadow: 4px 4px 14px #000; -webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; transform:rotate(15deg); -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); -o-transform:rotate(15deg); -ms-transform:rotate(15deg);}
</style>
click the link here below
<div>
<iframe width="460" height="400" class="ifr" src="../images/blog-20-12-13.pdf" ></iframe>
<iframe width="460" height="400" class="ifr" src="../images/5a.jpg" ></iframe>
<iframe width="460" height="400" class="ifr" src="../images/5a.jpg"></iframe>
<iframe width="460" height="400" class="ifr" src="../images/Wuzhen-20-10_02.mp4" ></iframe>
<iframe src="../images/demo_iframe.htm" name="iframe_a" class="ifr" height="400px" width="50%" title="iframe Example"></iframe>
<p><small>click the link here below</small></p>
<p><a href="https://www.lwitters.com" target="iframe_a">lwitters.com</a></p>
</div>
<style>
iframe .ifr{ margin: 8vw; -moz-border-radius: 12px; -webkit-border-radius: 10px; border-radius: 12vw; -moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000; transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); -ms-transform:rotate(-15deg);}
.web a{font-size: 2vw; font-weight: bold;}
</style>