Home Forums ASE Support Full width Iframe

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  Hyun Supul 3 months, 1 week ago.

Viewing 6 posts – 1 through 6 (of 6 total)

  • Author

    Posts

  • #14726

    Reply


    Rebecca Honeybone

    Participant

    I’m trying to make an iframe (using timeline.js) the full width of the page instead of having it restricted to the content width, anyone know how how I can make this work?

    #14745

    Reply


    Hyun Supul

    Keymaster

    Hi Rebecca,
    For now here is how you do it. This requires Novella or other themes that support Aesop full width components.

    Go to you edit post page on backend. Choose Text mode for editing.

    And you enter your iframe code like this:

    What’s important here is that you make sure you set the width to 100%, AND you don’t hit enter before your iframe tag. If you hit ENTER WordPress will insert a tag which prevents iframe going full width. Let me know how it goes. Thanks.

    Hyun

    • This reply was modified 3 months, 1 week ago by  Hyun Supul.
    • This reply was modified 3 months, 1 week ago by  Hyun Supul.
    • This reply was modified 3 months, 1 week ago by  Hyun Supul.
    • This reply was modified 3 months, 1 week ago by  Hyun Supul.

    #14771

    Reply


    Andy Freeman

    Participant

    Hi,

    We have all tried this now and none of us can make this one work. Here is the code I tried, I was careful not to insert a CR after the tag close.

    ASE says we need to just inline the iframe without any carriage returns after it and it should work, as their example had only a width and no height I have taken the height attribute out of the code as well <iframe src=”https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk&font=Default&lang=en&initial_zoom=2& width=”100%” frameborder=”0″></iframe> now we are after the iframe with no CR before it.

    This code is rendered here http://igor.gold.ac.uk/~mas01af/datablog/test-posts/

    Thanks,

    Andy

    #14772

    Reply


    Hyun Supul

    Keymaster

    Andy, let me come up with a more reliable and easier way of doing this. Give me a day or so.

    • This reply was modified 3 months, 1 week ago by  Hyun Supul.

    #14782

    Reply


    Hyun Supul

    Keymaster

    Hi Andy, here is a solution. Paste this code to the end of functions.php under the theme (Novella in this case) folder. And then iframes across the site can be made full width.

    
    function filter_ptags_on_iframe($content)
    {
        return preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
    }
    add_filter('the_content', 'filter_ptags_on_iframe');
    

    When you insert an iframe from the editor, leave a single empty line in front of the iframe and after. And set the width to 100% as usual. You can set height param to whatever you need.

    Now the issue is if you change or update the theme functions.php would be overwritten. So it’s recommended to inject that php code using a plugin instead (such as “Custom CSS-JS-PHP” plugin) Let me know if you need a help on this. Thank you.

    • This reply was modified 3 months, 1 week ago by  Hyun Supul.
    • This reply was modified 3 months, 1 week ago by  Hyun Supul.
    • This reply was modified 3 months, 1 week ago by  Hyun Supul.
    • This reply was modified 3 months, 1 week ago by  Hyun Supul.
    • This reply was modified 3 months ago by  Hyun Supul.

    #14787

    Reply


    Hyun Supul

    Keymaster

    If you want to use a plugin into insert the above PHP code (recommended) I recommend Code Snippets plugin.

Viewing 6 posts – 1 through 6 (of 6 total)

Reply To: Full width Iframe