0

I have changed in theme file to display post output like below but now if am going to add any youtube URL in post text it is not showing video iframe. also, I can not use the_content() function because there is some other issue with that function.

//the_content();
  $post_content .= $post->post_content;
  echo $post_content;

can anyone help me to show the iframe if I add the youtube video URL in the post and display the iframe in the frontend? I know this is default WordPress functionality but it is not working. any solution will be fine if there is a jQuery function also fine.

Kashif
  • 480
  • 4
  • 11
wpdevloper_j
  • 330
  • 2
  • 12

1 Answers1

1

So, if I've understood correctly, that you can add content to a post and it shows in front end but that youtube url does not display correctly in an iframe (so it's an oembed problem) then it might make sense to think about adding the whole embed code from YouTube.

Instead of pasting https://youtu.be/TE66McLMMEw into your content area, you might paste in this instead:

<iframe width="560" height="315" src="https://www.youtube.com/embed/TE66McLMMEw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

There are ways of using JS, grabbing a YouTube url and dynamically generating an iframe for it using the YouTube Player API (as per the video, or full docs and examples here: https://developers.google.com/youtube/iframe_api_reference ) but honestly, it seems a very complex way to solve the problem. It might be better to try and find a more robust fix that lets you use the_content().

UPDATE: if you cannot use iframe directly We can use notes from youtube API (and a great regex from this answer here: https://stackoverflow.com/a/8260383/8228720) to generate iframe on the fly. You just need to create a div with id "player" and paste the YT url inside it.

HTML

<div id="player">https://youtube-video-link-goes-here</div>

JS

//Get video url from div
    let videoUrl = document.getElementById("player").textContent; 
    let videoId = youtube_parser(videoUrl);
    var tag = document.createElement('script');
    
//Parse url for video id
    function youtube_parser(url){
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
        var match = url.match(regExp);
        return (match&&match[7].length==11)? match[7] : false;
    }
    
//Dynamically create iframe in the "player" div, adding our video id to it.    
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    var player;
    function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId: videoId,
              playerVars: {
                'playsinline': 1
              },
            });
    }
Matt Bedford
  • 93
  • 6