• Resolved Kerrie Redgate

    (@kerrie-redgate)


    Trying to embed a TEDTalk at the top of a blog post in Hueman theme. Using iframe code supplied, but the social media buttons stay on top of the video – how to shift them?
    (The WordPress shortcode didn’t work so resorted to iframe embedding.)
    Thanks!

Viewing 15 replies - 1 through 15 (of 18 total)
  • Hi Kerrie. Welcome to the Hueman forum. If you have the “Single – Scrollable Share Bar” option enabled try turning that off. If that doesn’t do it, can you post a link to your site? Thanks.

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    Thank you bdbrown for your very fast response!

    The Scrollable Share Bar had already been set to Off. I don’t have this problem with YouTube videos as they happily fill the width of the page with the buttons vertically underneath next to the content.
    I’m using the ‘Video’ format for the post.

    I’ve found a workaround, which is the TEDTalk Embedder plugin which allows you to use the TED shortcode for the video (as with WordPress.com sites) rather than the iframe code in the body of the content. (Neither works in the video address field below the content frame.)

    It doesn’t give me a full width video (even after I adjusted the video dimensions in the plugin), but at least it puts the Share buttons beside the video rather than on top of them. So it looks neat.

    I just prefer not to load the site up with more plugins.
    If there is another solution, I’d be happy to hear it. But if not, this will suffice.
    The site is blog.exceptionalpurpose.com but it looks reasonable at the moment with the plugin.
    Thank you again!

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    PS: Sorry, here is the actual page with the TEDTalk video:
    http://blog.exceptionalpurpose.com/sheryl-sandberg-why-we-have-too-few-women-leaders/’

    That’s interesting. I got the same results just posting the iframe code (854×480) into a Standard post content. The video is 100% of the content width and the social sharebar is to the right of the video. No plugin needed.

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    Weird that the social icons won’t move down below the full page width video as they do with YT videos (in video format).
    I had tried all variations of posts, inluding the Standard.
    I might try it again without the plugin and see if it looks the same as it does now. (The post had looked so much more dramatic with the full page width video, except for the social icons on top.) But at least if I can delete the plugin, that will be better. I’ll try that again.
    Thank you so much.

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    Hi, bdbrown: Very strange! I have deactivated (but not deleted) the TEDTalk Embedder plugin, and copied your strategy of using the iframe code for the video at the top of the (html) text area, and set the post to Standard format.
    But I now have the social icons on top of the full page width TED video again.
    Very odd that you don’t get the same thing!
    Is there any way of controlling the social icons without disabling them? Otherwise, I will have to go back to using the plugin.

    Here again is the link to my post, now with the icons overlayed on the video: ‘http://blog.exceptionalpurpose.com/sheryl-sandberg-why-we-have-too-few-women-leaders/’

    OK, now I see what you mean by “on top”. I thought you meant the sharebar was actually above the video. It seems like the iframe is overflowing the content container. Just out of curiosity, what happens if you change your Theme Options > Styling > Website Max-width from 1260 to 1340?

    Another option would be to reduce the width of the iframe using css:

    .single .post .entry iframe {
        width: 780px;
    }
    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    Thanks, bdbrown. I tried changing the max-width, but I still had the buttons overlayed on the video (apologies for the confusion!).

    The page is also too wide then for my bodytext which makes it harder to read in long horizontal lines if the page is too wide (Hueman’s page margins are narrow, I guess to more simply accommodate mobile devices).

    I’d rather not reduce the video width to 780px as my aim here is to get the video to fit right across the available page (as is happening OK) but with the buttons below it and beside my bodytext, as happens naturally with YouTube videos under the Video format. It’s a much more dramatic effect above the fold.

    I might just leave it as is, and put a small reminder underneath to get the viewer to view in full-screen mode (where there are no buttons at all).

    It’s really a cosmetic rather than functional problem, as the buttons still work OK, just a tad unsightly. With Hueman being an awesome free theme, I can’t complain! Alex has done a great and generous job!

    Many thanks for your time and diligence!

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    Oh-oh. Found another anomaly: In Firefox, the Share buttons and counters are overlayed. But in Safari on the Macbook and iPad, the white counter boxes are there, but the social icons themselves have vanished altogether! Same in Standard and Video formats. (No idea how it looks in Chrome.)
    This is so weird.

    Looks like I will have to abandon the full width video styling for TEDTalks. I even tried putting the iframe in divs, and in ps, etc, but the Share buttons just bully themselves in there!
    Such is life!

    But do you now if there is a way to delete the actual share counters from the code? I’m not good with php and jquery. Would look much neater without them.
    Thank you!

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    Had to solve it with another plug-in: “Simple Share Buttons Adder”.
    Had to disable the Hueman theme’s Share buttons. I now have the choice to put the buttons at the bottom of the posts. All is good now!
    Not strictly solved (as per the theme), but I’m happy!

    Glad you found a solution. If you still want to minimize the use of plugins (always a good idea 😉 here’s another option you might try:

    https://wordpress.org/support/topic/change-sharing-buttons-bar?replies=4

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    Thank you so much, bdbrown!
    I might give that a go. I like the look of the plug-in icons but the featured images are getting mixed up when sharing 🙁
    Putting the icons at the bottom of the post works well for TED videos.
    Really appreciate your work here on this forum – many thanks!

    You’re most welcome. If you don’t need any further assistance here please mark the topic as Resolved. Thanks.

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    Could I ask one more thing about the share buttons before closing (or I can start a new thread). Do you know the code for deleting the counters on the buttons? Is that possible?
    Many thanks!

    Thread Starter Kerrie Redgate

    (@kerrie-redgate)

    I don’t believe this: I’ve deleted the new plugins, put the iframe TED code back ion the post, put Alex’s code in the Custom CSS but the buttons are still at the top and overlaying the video. It works fine on my older blog (also Hueman same version and same WP 4.3.1) What can I be doing wrong? … It doesn’t pay to sleep at night …

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘embed ted talk without media buttons on video’ is closed to new replies.