Blocked by X-Frame-Options Policy error for youtube emebed

[JeevanisM]

Hello,

I am a simple code to display an emebedded youtube video in a page. the code is below 

<div class="card-body">
    <h3 class="card-title">
        <?php echo $vidoename;?>
    </h3>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="<?php echo $videourl;?>" frameborder="0" allowfullscreen></iframe>
        <p class="card-text">
            <?php echo $videosummary;?>
        </p>
        <p class="card-text">Uploaded Date:
            <?php echo $videolastupdated;?>
        </p>
        <p class="card-text">Teacher Name:
            <?php echo $videocreatedby;?>
        </p>

    </div>
</div>

Now, when I run the page I get this error  Blocked by X-Frame-Options Policy in firefox . Any idea how to solve this. 

 

<iframe class="embed-responsive-item" src="<?php echo $videourl;?>" frameborder="0" allowfullscreen></iframe>

is this simply wrong way of the feeding a youtube URL dynamically ? 

 

 

[flydev]

@JeevanisM

Look like you use the wrong youtube URL.

Try to see how is composed your URL and then be sure that you link youtube's video with the /embed endpoint as it allow cross origin request.

 

Check :

bad: https://www.youtube.com/watch?v=kSLhay7msTI

gud: https://www.youtube.com/embed/kSLhay7msTI

 

[JeevanisM]

1 minute ago, flydev ?? said:

@JeevanisM

Look like you use the wrong youtube URL.

Try to see how is composed your URL and then be sure that you link youtube's video with the /embed endpoint as it allow cross origin request.

 

Check :

bad: https://www.youtube.com/watch?v=kSLhay7msTI

gud: https://www.youtube.com/embed/kSLhay7msTI

 

yes I got it now, my bad. This is not a PHP issue, working on a function to conver the normal youtube URL to emebded URL.. 

thanks for the reply 

[flydev]

function convertYoutube($string) {
    return preg_replace(
        "/\s*[a-zA-Z\/\/:\.]*youtu(be.com\/watch\?v=|.be\/)([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i",
        "<iframe src=\"//www.youtube.com/embed/$2\" allowfullscreen></iframe>",
        $string
    );
}

Source: SO ?

 

[JeevanisM]

Hi,

I have fixed with a small piece fo code as below : 

    $url = "$videourl";
              $shortUrlRegex = '/youtu.be\/([a-zA-Z0-9_]+)\??/i';
              $longUrlRegex = '/youtube.com\/((?:embed)|(?:watch))((?:\?v\=)|(?:\/))(\w+)/i';

              if (preg_match($longUrlRegex, $url, $matches)) {
                  $youtube_id = $matches[count($matches) - 1];
              }

              if (preg_match($shortUrlRegex, $url, $matches)) {
                  $youtube_id = $matches[count($matches) - 1];
              }
            $fullEmbedUrl = 'https://www.youtube.com/embed/' . $youtube_id ;

and its working now  ! the thread is closed ! 

[leneborma]

X-Frame-Options is a header included in the response to the request to state if the domain requested will allow itself to be displayed within a frame. It has nothing to do with javascript or HTML, and cannot be changed by the originator of the request. You can't set X-Frame-Options on the iframe. That is a response header set by the domain from which you are requesting the resource . They have set the header to SAMEORIGIN in this case, which means that they have disallowed loading of the resource in an iframe outside of their domain.

I faced the same error when displaying YouTube links. You must ensure the URL contains embed rather watch as the /embed endpoint allows outside requests, whereas the /watch endpoint does not. For example: 

https://www.youtube.com/watch?v=8WkuChVeL0s

I replaced watch?v= with embed/ so the valid link will be: 

https://www.youtube.com/embed/8WkuChVeL0s

It works well.

Try to apply the same rule on your case.