Forum

Thread tagged as: Problem, Configuration, Addons

Cannot get Youtube iframe into my code

Hi,

First off I'm using Perch 3.

I have followed the instructions here https://docs.grabaperch.com/addons/field-types/youtube/

I have added the youtube addon (It's not linked in the youtube doc), which I located in the perch2 addon archive and added to addons/fieldtypes/youtube

I have added an API key to the config file

My field is in a repeater for a carousel and the relevant section looks like this

<perch:if exists="video">
<li>
    <perch:content id="video" type="youtube" label="YouTube URL" output="embed" />
</li>
<perch:else />

If I copy and paste an embed from youtube into the youtube field e.g. Youtube URL <iframe width="854" height="480" src="https://www.youtube.com/embed/T1R-d1ejlio" frameborder="0" allowfullscreen></iframe>

and save changes

the output in my source html is as follows <li> & l t ; iframe width="854" height="480" src="https://www.youtube.com/embed/T1R-d1ejlio" frameborder="0" allowfullscreen & g t ; & l t ;/iframe & g t ; </li>

If I just enter a youtube link instead of the full embed I just get https://www.youtube.com...

How do I get the iframe code in tag form? e.g.

<li>
    <iframe width="854" height="480" src="https://www.youtube.com/embed/T1R-d1ejlio" frameborder="0" allowfullscreen></iframe>
</li>

There are no errors in my debug report.

Thanks

Russell Gooday 0 points

4 years ago

Russell Gooday 0 points

4 years ago

As a follow up I had the youtube addon in the wrong folder youtube/youtube/

Pasting the embed into the field I now get

Notice: Undefined index: width in C:\xampp\htdocs\quigstock\perch\addons\fieldtypes\youtube\youtube.class.php on line 113

Notice: Undefined index: height in C:\xampp\htdocs\quigstock\perch\addons\fieldtypes\youtube\youtube.class.php on line 114

and at the bottom of the debug in red

Array ( [type] => 8 [message] => Undefined index: height [file] => C:\xxx\htdocs\xxx\perch\addons\fieldtypes\youtube\youtube.class.php [line] => 114 )

In addition I do now get a video showing below the field, but clicking on it says An error occurred please try later.

Note: if I paste the embed code into a static test page the video works

Drew McLellan 2638 points
Perch Support

4 years ago

The YouTube field type takes a YouTube video URL as the input, not an iframe. If you have the iframe already, it doesn't make sense that you'd want a special field type.

Russell Gooday 0 points

4 years ago

I have been trying both. I understand the logic in what you say.

If I use a Youtube video url I still get the same problem and error messages. Width and Height undefined line 113, 114

The only difference is that the video under the youtube url field now plays

If I change my template to (experimenting)

<li>
    <perch:content id="video" width="800" height="500" type="youtube" label="YouTube URL" output="embed" />
</li>

No difference same error.

Changing output to 'player' just outputs the link

Drew McLellan 2638 points
Perch Support

4 years ago

What do you get on your web page?

Russell Gooday 0 points

4 years ago

I read in one of other threads that the problem might have had something to do with the poster's staging server.

I have copied everything to my development site folder dev.mysite.com. On the development site I have not yet upgraded from Perch: 2.8.32

It appears to be working with no errors. Video is present!

On my xampp localhost where I have upgraded to Perch 3

The video is present and working, but I am getting the following errors on the screen (repeated twice)

Notice: Undefined index: width in C:\xampp\htdocs\quigstock\perch\addons\fieldtypes\youtube\youtube.class.php on line 113

Notice: Undefined index: height in C:\xampp\htdocs\quigstock\perch\addons\fieldtypes\youtube\youtube.class.php on line 114

This is my machine detail page

<?php include('perch/runtime.php'); ?>
<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name="robots" content="all">
    <meta name='author' content='www.quigstock.com'>
    <?php 
        perch_content_custom('Machines', [
            'page' => '/machines.php',
            'template' => 'machine_description.html',
            'filter' => 'slug',
            'match' => 'eq',
            'value' => perch_get('s'),
            'count' => 1
        ]);
    ?>

    <!-- Bootstrap Core CSS -->
    <link href='/css/bootstrap.min.css' rel='stylesheet'>

    <!-- Font Awesome -->
    <link href='/css/font-awesome.min.css' rel='stylesheet'>

    <!-- Flexslider -->
    <link href='/css/flexslider.css' rel='stylesheet'>

    <!-- Custom CSS -->
    <link href='/css/style.css' rel='stylesheet'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js'></script>
        <script src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js'></script>
    <![endif]-->
</head>

<body class='container'>
    <!-- Header Section -->
<?php include('includes/header.php');?>
    <!-- Endof Header -->
    <!-- Page Content -->
    <main class='container'>

<?php include('includes/breadcrumb.php');?>

        <div class='row'>
            <!-- Side Bar Category Menu -->
<?php include('includes/categories.php'); ?>
            <!-- Enfof Side Bar -->

        <?php
            // List mode
            perch_content_custom('Machines', array(
                'page' => '/machines.php',
                'template' => 'machine_detail.html',
                'filter' => 'slug',
                'match' => 'eq',
                'value' => perch_get('s'),
                'count' => 1
            ));
        ?>

        </div>
    </main>
    <!--footer start from here -->
    <?php include('includes/footer.php');?>
    <!--footer ends here -->
    <!-- jQuery -->
    <script src='/js/jquery-3.2.1.min.js'></script>

    <!-- Bootstrap Core JavaScript -->
    <script src='/js/bootstrap.min.js'></script>

    <!-- Flex Slider -->
    <script src="/js/jquery.flexslider-min.js"></script>

    <script src="/js/plugins/jquery.fitvids.js"></script>

    <!-- Main Custom Script -->
    <script src='/js/main.js'></script>
</body>

</html>
<?php PerchUtil::output_debug(); ?>

My machines listing page

<?php include('perch/runtime.php'); ?>
<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name="robots" content="all">
    <meta name='description' content='Seller in South East Asia of used machines including Turning, Milling, Grinding, Drilling, Planing, Gear-Making, Pressing and Fabricating.'>
    <meta name='author' content='Quigstock'>

    <title>Quigstock - Machines</title>

    <!-- Bootstrap Core CSS -->
    <link href='/css/bootstrap.css' rel='stylesheet'>

    <!-- Font Awesome -->
    <link href='/css/font-awesome.min.css' rel='stylesheet'>

    <!-- Custom CSS -->
    <link href='/css/style.css' rel='stylesheet'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js'></script>
        <script src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js'></script>
    <![endif]-->
</head>

<body class='container'>
    <!-- Header Section -->
<?php include('includes/header.php');?>
    <!-- Endof Header -->
    <!-- Page Content -->
    <main class='container'>

<?php include('includes/breadcrumb.php');?>

        <div class='row'>
            <!-- Side Bar Category Menu -->
<?php include('includes/categories.php');

                perch_content_create('Machines', array(
                    'page' => '/machines.php',
                    'template'  => 'machine_detail.html',
                    'multiple'  => true,
                    'edit-mode' => 'listdetail'
                ));

                if (empty(perch_content_custom(
                    'Machines', 
                    [
                        'skip-template' => 'true',
                        'category' => perch_get('cat')
                    ]
                ))){

            echo <<<EOT
            <div class='col-xs-12 col-sm-12 col-md-9 pull-left'>
                <h3 class='separator'>$catTitle</h3>
                <p>No $catTitle Machines currently for sale</p>
            </div>
EOT;
                } else {

                    perch_content_custom(
                        'Machines', 
                        [
                            'template' => 'machine_listing.html',
                            'category' => perch_get('cat')
                        ]
                    );
                }

            ?>
            </div>
        </div>
    </main>
    <!--footer start from here -->
    <?php include('includes/footer.php');?>
    <!--footer ends here -->
    <!-- jQuery -->
    <script src='/js/jquery-3.1.1.min.js'></script>

    <!-- Bootstrap Core JavaScript -->
    <script src='/js/bootstrap.min.js'></script>

    <!-- Main Custom Script -->
    <script src='/js/main.js'></script>
</body>

</html>
<?php /*PerchUtil::output_debug();*/ ?>

and my machine detail template

<perch:categories id="categories" label="Machine Type" set="Machines" required="true" />
            <div class='col-xs-12 col-sm-12 col-md-9'>
                <div class='frame'>
                    <h4 class='itemTitle'><perch:content id="model" type="text" label="Machine Model" required="true" title="true" /></h4>
                    <!-- Wrapper for slides -->
                    <div class='flexslider'>
                        <ul class='slides'>
                            <perch:repeater id="slideimages" label="Slide Images" max="10">
                            <perch:if exists="video">
                                <li>
                                    <perch:content id="video" width="800" height="500" type="youtube" label="YouTube URL" output="embed" />
                                </li>
                            <perch:else />  
                                <li>
                                    <img src="<perch:content id="slide" type="image" label="Slide" width="800" height="500"/>" alt="<perch:content id="alt" type="text" label="Alt text" />">
                                </li>
                            </perch:if>
                            </perch:repeater>
                        </ul>
                    </div>
                    <div class="custom-navigation">
                        <a href="#" class="flex-prev">Prev</a>
                    <div class="custom-controls-container"></div>
                        <a href="#" class="flex-next">Next</a>
                    </div>
                    <h3 class='separator'>Details</h3>
                    <div class='itemDescription'>
                        <perch:content id="desc" type="textarea" label="Description" html="true" editor="ckeditor"/>
                        <h4 class='price'>Price: <perch:if exists="price"><perch:content id="price" type="text" label="Price" help="If left blank will default to 'Call for Price'." /><perch:else />Contact for price</perch:if></h4>
                        <perch:content id="saleItem" type="checkbox" label="Sale Item" suppress="true"/>
                    </div>
                </div>
            </div>
<perch:content id="slug" for="model" type="slug" suppress="true" />
<perch:content id="shortdesc" type="text" label="Short Description" required="true" suppress="true" />
<perch:content id="thumbnail" type="image" label="Thumbnail" width="320" height="200" crop="true" suppress="true"/>

These errors also occur on the listings page for the category with the one product I have added video to, so possibly something up with my scripting/logic.???

Russell Gooday 0 points

4 years ago

I reverted back to Perch 2.8.32 on my xampp localhost server and the width and height errors were there, so it doesn't have anything to do with the Perch update. It works ok on-line, but does present an issue for testing locally. Not sure of the solution.

Drew McLellan 2638 points
Perch Support

4 years ago

Have you checked your error log?

Russell Gooday 0 points

4 years ago

Thanks for your patience Drew, appreciated. I will check out my error log. I could be wrong, but the problem seems to be pointing at the Youttube API and my localhost server. I'm also using the likes of localhost:[port number] for my root addresses, so I'm not sure if that has something to do with it. APIs and the like are a bit over my head.

Russell Gooday 0 points

4 years ago

I checked the error log and nothing enlightening, just repeats of the lines below.

[Fri Jun 16 23:27:32.122963 2017] [:error] [pid 1728:tid 1972] [client 127.0.0.1:xxxxx] PHP Notice: Undefined index: width in C:\xampp\htdocs\quigstock\perch\addons\fieldtypes\youtube\youtube.class.php on line 113, referer: https://quigstock.dev/machines/turning/ [Fri Jun 16 23:27:32.122963 2017] [:error] [pid 1728:tid 1972] [client 127.0.0.1:xxxxx] PHP Notice: Undefined index: height in C:\xampp\htdocs\quigstock\perch\addons\fieldtypes\youtube\youtube.class.php on line 114, referer: https://quigstock.dev/machines/turning/

I put a var_dump($raw) into the get_process function in the youtube addons and the online version returned:

array(22) { 
["path"]=> string(28) "https://youtu.be/T1R-d1ejlio" 
["youtubeID"]=> string(11) "T1R-d1ejlio" 
["title"]=> string(97) "เครื่องกลึง FRORIEP ประเทศ เยอรมัน 1600×20000 mm" 
["description"]=> string(0) "" 
["user_name"]=> string(16) "Bancha Srisuksod" 
["user_url"]=> string(0) "" 
["url"]=> string(43) "https://www.youtube.com/watch?v=T1R-d1ejlio" 
["date"]=> string(19) "2016-12-01 14:22:51" 
["thumb"]=> string(46) "https://i.ytimg.com/vi/T1R-d1ejlio/default.jpg" 
["thumb_w"]=> int(120) ["thumb_h"]=> int(90) ["width"]=> int(1280) 
["height"]=> int(720) ["player"]=> string(116) "" 
["rating"]=> string(1) "0" 
["likes"]=> string(1) "0" 
["dislikes"]=> string(1) "0" 
["favorites"]=> string(1) "0" 
["comments"]=> string(1) "0" 
["views"]=> string(3) "228" 
["duration"]=> string(8) "00:01:26" 
["_title"]=> string(97) "เครื่องกลึง FRORIEP ประเทศ เยอรมัน 1600×20000 mm"
}

localhost returned

array(2) { 
["path"]=> string(28) "https://youtu.be/T1R-d1ejlio" 
["youtubeID"]=> string(11) "T1R-d1ejlio"
}

The youtube addon isn't receiving the embedded/iframe version just the original link.

I would really love to know a solution to this. Currently searching "Youtube API and localhost server", but struggling to find an answer.

edit: Have just tried using ngrok with my localserver and it's throwing the same 2 errors

Drew McLellan 2638 points
Perch Support

4 years ago

Do you have curl enabled?

Russell Gooday 0 points

4 years ago

I thought that was going to be it, but yes it is enabled.

Out of my depth here, but get_details() never appears to be called.

Russell Gooday 0 points

4 years ago

Drew,

Forgive my ignorance, but couldn't $raw be checked inside get_processed, and if it doesn't match up (no 'title' key for instance) pass the youtubeID to get_details and merge the result?

Is that a very bad idea?

I know it doesn't necessarily get to the root of the problem.

Drew McLellan 2638 points
Perch Support

4 years ago

That is a very bad idea, yes. That would mean you'd be querying the YouTube API for every time someone loads the page, which would be both super slow and would possibly push you past your API cap.

Russell Gooday 0 points

4 years ago

You have to remember Drew that sometimes you are talking to dummies. After barking up the wrong tree the penny has finally dropped.

I logged into perch and went to my form with debug on and clicked save changes on the item with the youtube link in and lo and behold in orange there was my youtube link with all the relevant information. In short everything is setup correctly now, API credentials etc, but it needed a refresh.

What I didn't realise was that perch processes the youtube links ahead of time i.e.when you click save changes, which ties in with your comment.

Thanks

Drew McLellan 2638 points
Perch Support

4 years ago

Yes, that's done to keep your site loading quickly.

Forum

Cannot get Youtube iframe into my code

Russell Gooday 0 points

Russell Gooday 0 points

Drew McLellan 2638 points Perch Support

Russell Gooday 0 points

Drew McLellan 2638 points Perch Support

Russell Gooday 0 points

Russell Gooday 0 points

Drew McLellan 2638 points Perch Support

Russell Gooday 0 points

Russell Gooday 0 points

Drew McLellan 2638 points Perch Support

Russell Gooday 0 points

Russell Gooday 0 points

Drew McLellan 2638 points Perch Support

Russell Gooday 0 points

Drew McLellan 2638 points Perch Support

Drew McLellan 2638 points
Perch Support

Drew McLellan 2638 points
Perch Support

Drew McLellan 2638 points
Perch Support

Drew McLellan 2638 points
Perch Support

Drew McLellan 2638 points
Perch Support

Drew McLellan 2638 points
Perch Support