![]() Update the path of the slplayer.js file by replacing this: “new/path/to/slplayer.js”. The line of code above is the player script that you need to change. ![]() This direct method requires you to open the HTML file in a text editor, then copy the following parts of its content: the player script and the content inside the body tag.Īfter that, paste the copied part to your page and make some changes as follows: Change the Player Script There is an alternative way to embed HTML5 project directly into your web page without using the iframe. ![]() The dimensions of my project are 1024×576, so I figured the padding-bottom: 56.25% as above. Please refer to this link for more details. You need to update its style depending on your content aspect ratio. The proper source should look like this: iframe >Īnd here’s an example of an iframe showcasing my project:Īs you may already know, the outer div in the above code with padding-bottom style is used to keep the aspect ratio for the iframe content. So, get the HTTP URL of your uploaded HTML5 output and replace this part: “path/to/Saola Animate/HTML file”. The src attribute specifies the URL (web address) of the inline frame page. To be more precise, this is a line of code that you can copy to your web page: iframe > div > If you know copy and paste, you can do it. Iframe is just a very simple HTML code that used to display content from another source into a web page. The easiest way to embed HTML5 project into your web page is using an iframe (inline frame). Please refer to this link and follow the steps to upload files to your web server. To transfer all of the files from my local computer to the server, I usually use Filezilla. The picture below describes the proper output folder of a Saola Animate project: I suppose that you know how to export your project after creating and editing it successfully on Saola Animate. We can use this same technique to make other types of embedded content responsive like Google Maps, calendars, Vimeo, and YouTube videos.If you have created some beautiful HTML5 animations or interactive web contents by Saola Animate and still struggle to display them on your website, then stay tuned! This tutorial will show you two ways to embed HTML5 project into a web page.īut first, uploading your entire project to your web server is a prerequisite step to do further. Using aspect ratio boxes is great for all kinds of content, not just iframes. Finally, width and height are set to 100% so the iframe takes up 100% of the containers’ space.Like with most absolute positioned elements, we need to set the top and left properties so the iframe get’s put in the right place.Using overflow: hidden is important because it ensures if any content does protrude outside of the container, it will be hidden and avoid screwing up the site’s layout.height is set to 0 because padding-bottom gives the iframe it’s height. ![]() You can calculate this value using: (height / width) * 100 = aspect ratio precent. The padding-top value is calculated based on the aspect ratio of your content.This allows the absolute positioning of the iframe within it. Don’t forget to specify the containers position to be relative.If not, it defeats the purpose of creating an aspect ratio box. First, the content within the iframe must be responsive.Just keep in mind these tips when building aspect ratio boxes: Things to remember. No longer do you have to deal with those annoying gaps iframe containers make as content width changes. Say Goodbye to embedded content breaking your layouts with aspect ratio boxes using the intrinsic ratio technique. CodePen Embed Fallback Or you can use custom properties: > :first-child ) : Responsive iframes are awesome.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |