Silverstripe. Embedding 2 youtube videos in content area shows the same video in both

Question

I developed a site in Silverstripe (3.1) for a client. Today, he tried to embed a second youtube video into a content area in the CMS (insert media>from the web> paste youtube URL > add URL > insert ).

In the WYSIWYG in the CMS the thumbnails for the videos are shown properly, however in the template on the front end, the first video is repeated in the second video's iFrame.

I've tried changing these around, removing both videos and adding them again myself to eliminate some freak user error but I can replicate this every time. The first video is always cloned in the second video's iFrame.

I have also tried embedding the videos directly with their embed code from YouTube but this suffers the same.

Inspecting the iFrames, the second video's src is the same as the first's so I assume this is something to do with the way the embed is replacing the text on it's way to the template.

Is there a way around this issue?

A possible hacky workaround could be to open up the html source code in the editor in the backend (there is an HTML button) and maybe see if you can change the YouTube src in there. But if that works it's just a temp fix and doesn't fix the real problem... — ifusion
@ifusion the WYSIWYG editor shows the thumbnails for the correct videos so it's not an issue with how it's storing the content in the DB or displaying them in the CMS, only when it spits it out to the template on the front end. Cheers! — Fraser

cmc cmc · Accepted Answer · 2015-12-15T14:26:47

I don't know if you want to go this route, but I have pages with multiple YouTube Videos thad use a YouTubeWidget that extends DataObject. That gets added as a $has_many to the page class. See this gist-

https://gist.github.com/cmcramer/60b7ff41017b4a633894

(revised)code snippet from my gist added per @wmk request

class YouTubeEmbed extends DataObject {

    private static $db = array(
        'YouTubeTitle'     => 'Varchar(255)',
        'YouTubeId' => 'Varchar(100)',
    );

    private static $has_one = array(
        'PageWithVideo' => 'Page',
    );


    private static $summary_fields = array(
        'YouTubeTitle'                     => 'YouTube Video',
    );

    private static $default_sort = array(
        'YouTubeTitle',
    );


    private static $display_fields = array(
        'Title'             => 'YouTube Video',
        'YouTubeId'         => 'Video ID',
    );



    public function WatchOnYouTubeUrl() {
        $strUrl = "https://www.youtube.com/watch?v={$this->YouTubeId}";
        return $strUrl;
    }

    public function VideoIframe() {

        $strHtml = '<iframe width="' .
                               $this->Width . '" 
                            height="' . 
                               $this->Height . '" 
                             src="https://www.youtube.com/embed/'.
                               $this->YouTubeId . '
                               ?rel=0&autoplay=1&showinfo=0" 
                               frameborder="0"></iframe>'

        return $strHtml;
    }


}



class VideoPage extends Page {
    ...

    private static $has_many = array(
        'Webcams'   => 'YouTubeEmbed',
    );    
    public function getCMSFields() {
        $fields = parent::getCMSFields();

        $fields->addFieldsToTab('Root.Webcams', GridField::create(
           'Webcams',
           'Webcams',
            $this->Webcams(),
            GridFieldConfig_RecordEditor::create() 
        ));

        return $fields;
    }
}



/* In the template */
<div id="webcams">
    <% loop $Webcams %>
        <span class="webcam-block">
              $VideoIframe
              <p>$YouTubeTitle</p>
        </span><!-- .webcam-block -->
    <% end_loop %>
</div>

Silverstripe. Embedding 2 youtube videos in content area shows the same video in both

1 Answers