(Theme – Tempera) Get video element into right spot

  • Ok so I’ve created by home page image and put it in place but I have a couple of question:

    1. I uploaded the picture into the body of the “Home” page. Now, when I mouse over it, it fades in color a bit? What’s up with that?

    2. I have inserted 2 placeholders into the image in order to demonstrate where the video (currently below the post) is supposed to go and where my opt in box will go.

    Here’s the site:

    https://stacyossowicz.com

    How do I get those elements into those places? I can enlarge or decrease the size of the image if need be, but I don’t know where to start to move those elements into place.

    I’ve been reading about some basic HTML and CSS, but I’m surely not competent enough yet to figure this one out on my own.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter aflblogger

    (@aflblogger)

    bumpity bump

    Steve

    (@seekerabroad)

    Hi,
    Your image is being affected by the following rule at line 1318 of your style.css

    #content img.aligncenter:hover, #content img.alignnone:hover, #content .wp-caption img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    }

    To position the iframe video, I would first wrap it in a div(.videowrapper) and use the following css:

    .videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    }
    .videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    I would then wrap this another div which would be responsive and the size and position of the grey placeholder. I’d do it this way so that the video would properly scale responsively with the rest of the page.

    This is not the only way to do it but it is how I would approach it.

    Thread Starter aflblogger

    (@aflblogger)

    Thanks for that. I fixed the hover rule. I’ll try and see what I can do with the div wrapper.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘(Theme – Tempera) Get video element into right spot’ is closed to new replies.