Shortcode problems

  • Resolved Klooven

    (@klooven)


    7 years, 9 months ago

    Hello.

    I’ve created a plugin to make a shortcode like this:

    [navid id="VIDEOID"]

    It then outputs this:

    <iframe id="navid-player" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/VIDEOID?disablekb=1&rel=0&showinfo=0&color=white"
frameborder="0" allowfullscreen></iframe>

    That is a slightly modified version of the YouTube player.

    So when I create a post in my theme with the post format “Video”, the video should be moved to the “master header” using JavaScript in the theme.

    For some reason when I use the shortcode, the player won’t be moved to the master header, but when I paste the iframe straight to the code, the video is moved to the “master header”.

    Does anyone know why this happens?

    Thanks for any help!

    Ps. I’m using the Cubic theme, and posted the question in the Cubic forum. I got directed to this forum by one person in that post.

    • This topic was modified 7 years, 9 months ago by Klooven. Reason: Code formatting
Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    An iframe created through shortcode would not appear any differently to JavaScript than an iframe entered directly. What might be different is what container the iframe appears in. If the shortcode handler is echoing out the iframe instead of returning it, the iframe will appear in a completely different location than where the shortcode appeared. Possibly somewhere where JavaScript is not even looking.

    I cannot say for sure since you provided no code, but shortcode handlers echoing out content is a common mistake and could explain the behavior. Shortcode content must always be returned by the handler, never echoed out.

    Thread Starter Klooven

    (@klooven)

    Hello.

    Sorry for the late answer.

    Here’s the code.

    https://gist.github.com/Klooven/e1f32dba4bcae942e8bb21f54f371fdd

    The plugin returns the code as you said, so I don’t know what the problem is…

    Moderator bcworkz

    (@bcworkz)

    A strange one indeed. You might try disabling JavaScript, then compare the shortcode version of HTML with the pasted into content version.

    You also could consider a different approach than moving with JavaScript. It might be possible to move the video with CSS alone. It’s also possible to get the master header to directly output a specific post’s video with some PHP logic. In this scenario, it’d be better if the video were not in content. The video ID could be saved as a custom field value. The width too if that’s important.

    The header code can determine what is being loaded with get_queried_object(). If the query is for a single post (I’m assuming this is where unique videos would be used), the object will be WP_Post and the post’s ID is used to retrieve the video ID and width with get_post_meta(). Then the video’s iframe can be constructed and output right in the header. No need to move anything after the page loads.

    Since you would be altering the header file, you should create a child theme to protect your modification from theme updates.

    Thread Starter Klooven

    (@klooven)

    Hello.

    I actually fixed this by changing the code.

    I had to “wrap” the iframe in a <p></p>, and then i removed the type="text/html" attribute from the iframe. It fixed my problem!

    I’ve updated the Gist if someone is interested of that.

    Thanks for the tips!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Shortcode problems’ is closed to new replies.

Tags