• 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…

    http://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)
  • 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="http://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:
    http://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!

    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.