Ryan Hayes
Chief Educational Officer

YouTube, Divi, and Game On

I know several of you are also using Divi for your Game On class web sites. I used to use the Game On video lightbox option, but it relies on a Flash Player. Flash Player seems to get updated every other day and was breaking my missions way too often.

So, I started just "embedding" the YouTube videos inside of the mission. Wordpress, and/or Divi, made this easy. I could just copy and paste the YouTube link and the video would be embedded perfectly within the mission/post/page. However, this year that is not the case.

In the dashboard it looks awesome. I paste the YouTube link in the body, WP does its magic and it is a full embedded video. I then publish the mission. When I access it from the front end there is no embedded video, just a link to the YouTube video, and it isn't even a clickable link. I swear it wasn't doing this last year.

Anybody experience this? Have a workaround or solution without having to go into HTML view and pasting the actual embed code?

Ratings
0 / 5 • No Ratings

Comments (7)

Write a reply...
or Join for free to view all comments and participate in the discussion.

Mick McMurray

Posted on Sep 29, 2017 6:20:51 PM Permalink

Yes, I've experienced it. And, yes I have a solution. Give me a bit of time and I'll have it available

Here's the technical details:

By default the auto embed (oembed) feature in Wordpress should work in any theme for a wide variety of websites, but only on actual post content. Stages in Game On ​are post meta-data. I'm brand new to Wordpress (but not CMS systems), so I'm guessing that in that in the past the oembed applied automatically to metadata. Divi also uses a feature called fitvids that makes all embeded videos responsive. This is a good thing when windows are sized small, but can be annoying when sized large as the video gets really large.

There is a fix where an additional div can be wrapped around the video to limit the size. Additionally, I also prefer my videos to open in a lightbox when clicked, and will be adding a featherlight lightbox around the videos.

I'm working on a fix that will:

  • apply oembed to URLs posted on their own line
  • apply fitVids to the oembed
  • add a option to set the max width
  • and add an option to open videos in a lightbox

I'll working to get it ready for the next release.

Mike Skocko

Posted on Sep 29, 2017 6:39:53 PM Permalink

For the record, Mick is also hacking Game On code and is making magic happen. You are going to love some of the new stuff he'll be rolling out soon.

He's also a Photo/Digital Arts/Anything Creative with Tech teacher at another school in my district. He rocks!​

Mick McMurray

Posted on Sep 29, 2017 7:29:07 PM Permalink

Thanks for the introduction Mike​. I should have started with that.

Mike Skocko

Posted on Sep 29, 2017 8:26:19 PM Permalink

No worries. This is a pretty laid back group, Mick (99% lurkers​ and a few hard-core contributors).

One drawback is that you're not notified of new comments unless you've also commented on that thread. Head over to ​the primary discussion and drop a comment so you'll be notified of future activity.

No way to be notified of new threads. I missed this one for 30 days before I thought to check. D'oh! (Sorry, Ryan.)

Mike Skocko

Posted on Sep 29, 2017 2:54:12 PM Permalink

​I worked with another teacher yesterday and this was part of the discussion. He pastes the generic YouTube URL directly into the Visual editor and uses a video lightbox plugin to launch and autoplay on click. It resizes with the browser window. Pretty slick.

I, however, still use this old-school method:

Copy and paste [my code disappeared] (from a TXT file) into the HTML editor (in the ill-named Text tab).

That's a link to a placeholder video using WordPress/Divi formatting (one of those changes the YouTube code). It establishes the size and along with the ​Hide YouTube Related Videos plugin, stops 100% of the distractions at the end of the video.

Then I copy the embed code for the actual video and paste it in the TXT file two lines below my placeholder video...

Aw heck, ​here's a slow-mo version of how I do it. No narration—recorded in class. Takes about 30 seconds and keeps my page looking clean. (And yes, I really do use white periods to add extra space for aesthetic reasons.)

------------------------

Here's ​the TXT file if anyone wants it.

Adam Coulson

Posted on Sep 1, 2017 5:19:11 PM Permalink

​I use the embed code youtube provides then I past that into the "text" instead of the "visual" portion of each stage. When you bounce back to the visual side it looks like you want it to...at least it would if my district didn't block on my Youtube content forcing me to host all my own videos again. :(

Mike Skocko

Posted on Sep 29, 2017 2:09:27 PM Permalink

Blocking the #2 search engine in the world is insanity.*

*Yes, I know YouTube isn't considered a search engine, unless of course, you use it for finding information—which is the point.​