The next thing I want to do is show you how to use the plugin that will switch between mobile content and non-mobile content. What I have got here is a mobile video, right? And then I have got a standard video and they’re just sitting on top on each other. Obviously that’s not how you want to do it, right?
BYOB Thesis Mobile Content Switcher Plugin
This week I created a plugin called “BYOB Thesis Mobile Content Switcher”. Come under Benefits and plugins, scroll down to the bottom and there’s this plugin that you can download. It will allow you to create content blocks that you can insert into your regular content that will switch between mobile content and non-mobile content, and the main reason I did this was for video.
I have already downloaded and installed that plugin, and I am going to reactivate that here on this site, “thesisemember.com.” Come down to plugins and I’ll reactivate the “BYOB Thesis Mobile Content Switcher,” and there aren’t any settings for you to set. It does have an instructions panel here in the BYOB thesis plugins section, but it is just a set of directions on how to use it. If you come to any post or page, what it does is create a dialog here called “Mobile Content Switcher.”
Starting from scratch this is what that mobile content switcher looks like. It might actually show up down here at the bottom, so if you install the plugin and you don’t see it showing up then make sure you scroll all the way down to the bottom to find it. It’s probably the only thing on your post or page edit screen that has blue text so it should be really easy to find.
Non Mobile and Mobile Content
The way this works is that it has two boxes. The first one is the non-mobile content and the second one is the mobile content. In our case if we take our S3 video here and we put that in our non-mobile content display area, and then we come back up here and we take our iframe and we put that in the mobile display area. Then we take this shortcode right here “[byob_mobile_switcher block=1].” If we take that shortcode, copy it, then come here to the inside of this text where we want that video to display, and paste that shortcode, now what’s going to happen is, depending upon what device visits the page, it will either display the non-mobile content there or the mobile content.
Let’s hit update and then if we look at this page, now that mobile content is gone but the “Click to Play the Video” isn’t gone. If you had a mobile device in front of you, like if you had your iPad, and you went to this page, this “Click to Play the Video” would not be there. Neither would the rating zero and three views. What would be there is the Vimeo version of the video.
You can do this as many times as you want. So we’ve done this for block one, we can add an additional block of switched content simply by pressing that add additional block of switching content and now we can copy our S3 video here, but let’s get the right video. Come back to thesisemember.video, then “how-to-install-wordpress,” and then “understanding-the-wordpress-control-panel,” and copy that link address. I’m just going to paste it here just to give you an understanding.
Come back over here to WordPress on the other side of that backslash, all the way to the mp4. It is going to use the same splash image. Now I can just delete this. I can come back over to my Vimeo and I’m going to go to “Videos,” “My Albums,” scroll down here to “Start Building Your Website Here,” and then I’m going to get video two. I’m going to get the embed code and I’m going to customize my embed options, and I’m going to use 600 here and grab that embed.
Come back over to the page, paste that embed there, and then grab the shortcode again. This time it is block equals two, copy it, and put it where I want it to go, which in this case is above the download link and hit update. The other thing I want to do is that I want to get rid of this; I want to change the view so the video actually shows. So I’m going to come back over here to player settings. Embed on a page, update the options.
Come back over here and refresh the page and here we have it. The first video is showing up, the second video is showing up, and again if we came to this place on a mobile device it would have the Vimeo video rather than this S3 video. And so that’s how you set up for a secure and mobile video. Next week we’ll look at how to set up for a visible and mobile video; that is a public and mobile video rather than a secure one.