Using the srcdoc attribute of iframe tag skillfully to create click to load calling code

Calling external pages or videos with the iframe tag on the page will increase the page loading time. In order to make the iframe frame call not affect the page loading speed, under Blueleaf sharing, you can skillfully use the srcdoc attribute of the iframe tag to make the method code of click to load the call, so that the user can click the button to load the frame, so that the page loading speed will not be affected, The following code is needed for use.

 //Pay attention to changing the page URL and image URL to your own <iframe width="600" height="360" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}span.icon-play{width: 60px; height:60px;display: inline-flex;align-items:center;justify-content:center;background:#037DD6;border-radius: 100%}img,span.overlay,vodep{position:absolute; width:100%;top:0;bottom:0;margin:auto;height:100%}span.overlay{text-align:center; font:48px/1.5 sans-serif;color:white;width: 100%;height: 100%;display: inline-flex;align-items: center;justify-content: center;background: rgba(0,0,0,0.5); transition: background 300ms ease;}span:hover{background: rgba(0,0,0,0.3)! Important;}</style><a href=page URL><img src=picture URL><span class=&quot; overlay&quot;><span class=&quot;icon-play&quot;><svg xmlns=&quot; http://www.w3.org/2000/svg&quot ;  width=&quot;23&quot; height=&quot;28&quot; viewBox=&quot;0 0 23 28&quot; fill=&quot;none&quot;>\n        <path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M0.976562 13.7469V25.0549C0.976562 26.6431 2.73876 27.5977 4.0691 26.7301L21.4079 15.4222C22.6178 14.6331 22.6178 12.8608 21.4079 12.0717L4.0691 0.763819C2.73876 -0.10379 3 0.976562 0.850786 0.976562 2.43904V13.7469Z&quot;  fill=&quot;white&quot;/>\n        </svg></span></span></a>"></iframe>