• astephens

    (@astephens)


    I inserted an iframe (a media player from an external site) into a page on my site and I’m having trouble getting it to center on the page. I’ve read the forums and tried a few things but obviously something I’m not seeing.
    Also looking to decrease space above page title making it closer to nav bar.
    Thank you…

    https://gracechurchhouston.com/grace/

    (This is a blank template started from scratch in a web design class.)

Viewing 4 replies - 1 through 4 (of 4 total)
  • Level9themes

    (@level9themes)

    Generally you do it the same as with other elements: margin: 0 auto; But iframes display inline by default. So if you are going with margin: auto; you will need to add display: block; as well. Also for auto margins to work an explicit width must be set on the iframe.

    Add the following code into your stylesheet.

    iframe {
        display: block;
        width: 800px;
        height: 400px;
        margin: 0 auto;
        border: 0;
    }
    Thread Starter astephens

    (@astephens)

    Thank you so much for your help.
    After writing this question, I realize I had the page for the iframe on the wrong template. I have a “Media Player” template that i would like to use because i have 3 difference “players” I will be using on 3 different pages and i would like to use the same template (format) for each one. So i changed the page to the proper template but it doesn’t pick up the content from the page (because there’s nothing there). The template code is:

    <?php
    /*
    Template Name: Media Players
    */
    ?>
    <?php get_header(); ?>
    <?php get_footer(); ?>

    and the page with the iframe on it is:

    <center>
    <h1>Sunday Morning Message</h1>
    <div>
    <iframe style="width: 908px; height: 400px;" src="https://gracecenterhouston.com/widget/player/6685" height="240" width="320" frameborder="0" align="middle"></iframe>
    </div>
    </center>

    Since i will be creating two more pages with different iframe codes for use on this template, I need to know what i put between the “get header” and “get footer” on the template so it will call the proper page.
    Right now i have the page displaying properly here:
    https://gracechurchhouston.com/grace/
    because i’ve put the iframe code directly into the template but that won’t work for the other 2 different player pages.
    Also i will probably need to name the div so i can use CSS to make adjustments in the vertical spacing on the page?
    Thank you!

    Level9themes

    (@level9themes)

    What version of wordpress are you using? Version 3.6 and above natively support video. You can insert a video using shortcode, for example:

    [video width="600" height="480" mp4="source.mp4" ogv="source.ogv" webm="source.webm"]

    You only need to provide the full urls of your videos into the shortcode paramaters, WordPress will take care of the rest.

    Thread Starter astephens

    (@astephens)

    I’m using v. 3.7.5 so I need to look into that option.
    All my videos are stored on a 3rd party application (sermon.tv) that provides a customizable media player with a playlist on the side. I use the iframe provided for each episode and i just need to find out how to place it properly on the pages.
    Of course the videos are also stored on my hosting provider and i may be able to use your suggestion and eliminate the 3rd party site (and expense) but i feel i would need some type of playlist for viewers to choose other messages from that page so not sure i could set up something like that with the simple single video source option. I need to learn more about it.
    I really appreciate your response and any other information you have on that.
    Thank you…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Center an iframe on a web page’ is closed to new replies.