4

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?

8
  • Which SS version are you using?
    – g4b0
    Dec 15, 2015 at 8:47
  • 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
    Dec 15, 2015 at 9:34
  • @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
    Dec 15, 2015 at 10:28
  • @Fraser 3.1.x what is the value for the x?
    – g4b0
    Dec 15, 2015 at 11:08
  • @g4b0 3.1.0 (took a while to find that ;))
    – Fraser
    Dec 15, 2015 at 11:54

1 Answer 1

0

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>
2
  • I've informed the client that this is the way we're going to have to go if I can't find a simple fix. Will be as a last resort though. He's an old fashioned designer and as a result loves having the flexibility to make every page look completely different by messing around in the WYSIWYG (and then me coming along and cleaning it all up). Not too happy about having to "hack" the core to get this sorted even though it'll likely be a simple hack.
    – Fraser
    Dec 15, 2015 at 15:05
  • Please include the relevant code in the answer, as the link might break in future, and link-only answers could be deleted on stackoverflow.
    – wmk
    Dec 16, 2015 at 10:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.