![]() ![]() The full code from this tutorial can be viewed on my responsive iframe jsfiddle. You have successfully created a responsive that will display beautifully in any sized view port. Position: absolute /*required because container has a height of 0*/ Height: 100% /*make sure video takes up 100% of the height*/ Edit and add the iFrame HTML code to embed it manually. Install a WordPress plugin, like Advanced iFrame. ![]() Width: 100% /*make sure video takes up 100% of the width*/ To recap, here are three ways to embed an iFrame into your WordPress website: Copy the embed iFrame code and paste it into the HTML block. If the video aspect ratio is 4:3, set padding-bottom to 75%. at 20:12 you could use easyXDM for communication between the page where i-frame is embedded and the document on server the iframe is pointing to. But everything inside the iframe is a separate page, and therefore not in the domain of your CSS nor JS. If the aspect ratio is 16:9 set the padding bottom to 56.25%. The iframe itself ('the box') can be responsive. Note: The padding-bottom is set based on the videos aspect ratio. Overflow: hidden /*hides the video if it escapes outside the container*/ Height: 0 /* Not needed as the iframe get its height from the padding bottom */ Instead I plumped for embedding both the video and chat
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |