I am thinking of embedding a couple of iframes in a slide part of an Xaringan HTML presentation. The below code can be used to embed an iframe.
I want to know how I can add a fullscreen toggle in an iframe, so that the URL can be viewed in fullscreen if need be.
How can I do this?
<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/XXX" width="100%" height="100%" frameBorder="0"></iframe>
Since screens come in all sorts of sizes, you may want to consider the aspect ratio. Additionally, you can't use percentages as you did, They can be set as an inline style or separated in style tags. Take a look at this code. You see the width and height with pixel values as attributes, but the percentage is an inline style. I didn't choose this width and height, it's the standard values that YouTube puts in their embed code.
<iframe width="1212" height="682" src="https://www.youtube.com/embed/i8PKI_zJfDU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="width:100%; height:100%;" allowfullscreen></iframe>
If I were to reduce the size and still use the percentage inline styles, it will still use full screen. If you want to use percentages, you need both settings—the video's size in pixels and the percentages (should you choose to use them).
<iframe width="404" height="228" src="https://www.youtube.com/embed/i8PKI_zJfDU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="width:100%; height:100%;" allowfullscreen></iframe>
The real fun comes from toggling between fullscreen and not!