WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] New YouTube Embed Code Disappearing?! (9 posts)

  1. tasty.donuts
    Member
    Posted 3 years ago #

    Running the most latest version of WordPress -- found that when adding the new YouTube embed code that it would disappear out of the post editor when switching between the "HTML" and the "Visual" tab. Rarely and randomly the code DOES preview on the "Visual" tab but disappears when adding a carriage return (hitting "enter") while editing text below. They do seem to be able to be uploaded though, if you hit "update" on the post while the new code is in the "HTML" editor tab, but then the code can disappear again if you try to edit the post again.

    **NOTE** I am talking about the NEW YouTube code which looks like this:
    <iframe title="YouTube video player" class="youtube-player" type="text/html" width="560" height="345" src="http://www.youtube.com/embed/vQf4IybnSZA?rel=0" frameborder="0" allowFullScreen></iframe>

    I have tested this will all of the plugins deactivated as well as on a different theme. None of the "code" tags in the Post editor keep the embed codes from dissapearing.

    This issue occurs in all browsers, however through the Developer Tools on Chrome I have been able to see that there is an error that says Failed to load resource www.youtube.com/embed/vQf4IybnSZA?rel=0 Failed to load resourceon the post editor after switching from the "HTML" view to the "Visual" view (which makes the embed code disappear).

    This style of old code still works just fine, and does not disappear:

    <object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/vQf4IybnSZA?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/vQf4IybnSZA?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

    But we need to use the NEW code. Anyone know the answer to this?

  2. tasty.donuts
    Member
    Posted 3 years ago #

    Arg dangit WP doesn't support iFrames...

    Any benefit lost by this???

  3. Jamal Mohamed
    Member
    Posted 3 years ago #

    As you stated, WP rich text editor (the WYSIWYG) doesn't support iFrames, but it's not the end of the world and we can do a workaround to make it work with the new YouTube embed code.

    We'll use custom fields and a shortcode.

    Paste the following code in your theme's functions.php

    /* Add youtube_embed shortcode */
    add_shortcode( 'youtube_embed', 'my_youtube_embed_shortcode');
    
    /**
     * New YouTube Embed shortcode.
     *
     * Enables you to insert the New YouTube embed code in a custom
     * field and display it inside your post using the shortcode
     * [youtube_embed]
     *
     */
    function my_youtube_embed_shortcode(){
    	global $wp_query;
    
      // Grab the value of youtube_embed meta key
    	$yt_embed = get_post_meta( $wp_query->post->ID, 'youtube_embed', true );
    
    	if ( $yt_embed )
    		return $yt_embed;
    	else
    	return false;
    }

    When you finish the above step, create a custom field key called youtube_embed and paste the YouTube embed code in the custom field value textarea.

    Then call the shortcode [youtube_embed] anywhere in your post editor, and it will display the YouTube iFrame.

    Let me know if it works for you.

    Cheers,

  4. w2aiq
    Member
    Posted 3 years ago #

    Just wanted to say I am experiencing the same issue as tasty.donuts above.....

    I'll be trying the solution presented by jamal mohamed

  5. tasty.donuts
    Member
    Posted 3 years ago #

    @w2aiq WordPress simply does not support iframes, that is why this does not work.

    If you are just putting up YouTube and other videos you can just use the "old" embed code, which is available as an option on the YouTube embed menu.

    Of course I haven't really had the time to zone in on it so I don't really know what benefits the iFrame gives you for the type of videos that you'll be using. From what I've read they seem to offer the capability to change the type of video to better suit mobile browsing, however I have confirmed that older style embed codes are indeed visible on most platforms if their core services support them. For the moment I'm using Justin.TV so this is not really an issue for me.

  6. prettyspecialrecords
    Member
    Posted 3 years ago #

    Thanks for the code Jamal. It works great! I made a small adjustment to handle multiple videos and to allow the user to choose which video to display. It wraps them in a div so that they can be styled.

    /* Add youtube_embed shortcode */
    add_shortcode( 'youtube_embed', 'my_youtube_embed_shortcode');
    
    /**
     * New YouTube Embed shortcode.
     *
     * Enables you to insert the New YouTube embed code in a custom
     * field and display it inside your post using the shortcode
     * [youtube_embed]
     * by default it will display all videos added as custom field.
     * The parameter "number" tells it which video to display according to the order it was added to the custom fields.
     * [youtube_embed number="2"] will display only the 2nd "youtube_embed" custom fields.
     */
    
    function my_youtube_embed_shortcode($atts){
    	extract( shortcode_atts( array(
    		'number' => null,
    	), $atts ) );
    
    	global $wp_query;
    
      // Grab the value of youtube_embed meta key
    	$yt_embed = get_post_meta( $wp_query->post->ID, 'youtube_embed', false );
    
    	if ( $yt_embed ) {
    		if ($number == null) {
    			foreach($yt_embed as $code_string) {
    				$embed_code .= '<div class="youtube">' . $code_string . '</div>';
    			}
    		}
    		else {
    			$number -= 1;
    			$embed_code = $yt_embed[$number];
    		}
    	}
    	return $embed_code;
    }
  7. tasty.donuts
    Member
    Posted 3 years ago #

    Nice guys :)

  8. Jamal Mohamed
    Member
    Posted 3 years ago #

    @tasty.donuts

    Of course I haven't really had the time to zone in on it so I don't really know what benefits the iFrame gives you for the type of videos that you'll be using. From what I've read they seem to offer the capability to change the type of video to better suit mobile browsing

    Since the breakthrough of HTML5 the usage of flash based video players were fading. The benefit of using iFrame for embedding videos and other flash based components like Scribd books is that the server detects whether the client browser supports <video> tag or not. iPhone and iPad (for example) don't support flash, but they support the video tag, therefore YouTube, Vimeo and Scribd will serve the appropriate version for these devices.

    @prettyspecialrecords - Glad that it worked for you. And your adjustments are spot on too!

  9. tasty.donuts
    Member
    Posted 3 years ago #

    @Jamal Mohamed

    That's what I'd heard too the whole thing seems like a bit of a mess though, I'm going to wait it out and am using Justin.TV embed codes now that seem to work just fine in iPhone.

    (This is one of those things that I think will take time to come about but isn't totally here yet).

    http://www.reelseo.com/youtube-adds-iframe-embed-code-no-iphone/

Topic Closed

This topic has been closed to new replies.

About this Topic