SilverStripe. An attachment of 2 YouTube videos in the 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 the content area in the CMS (paste media> from the Internet> paste YouTube URL> add URLs> paste).

In WYSIWYG in CMS, the thumbnails for the video are displayed correctly, however, in the template at the front end, the first video is repeated in the second iFrame video.

I tried changing them by deleting both videos and adding them again to fix some freak user error, but I can repeat this every time. The first video is always cloned in the second iFrame video.

I also tried to embed the video directly using my embed code from YouTube, but it suffers the same.

By checking iFrames, the second src video matches the first, so I assume that this is due to the way inlining replaces the text on it with the template method.

Is there any way to solve this problem?

Answer 1

I don’t know if you want to go this route, but I have pages with several YouTube videos that use YouTubeWidget, which extends DataObject. This is added as $ has_many to the page class. See This gist -

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

(revised) code snippet from my append added for each @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>