Adding Videos to Guides

You've made it! We're at the end. Your videos are on your guide, and they look like…

Crap.

I mean, utter garbage. At this point, you might be calling me mean names in your head, wondering if I've finally lost it. Instead of having beautiful-looking videos that are nicely sized and easy on the eyes, you probably have a long, scrolling page of videos.

Yeah, not exactly the look you wanted. Well, that's where positioning and sizing come in. Positioning and sizing tell things where to live on the page and how much space to take up.

Some general guidelines when positioning and sizing your videos:

1. You can have one, two, or three videos in a single box.
2. If you have more than three videos, you'll want to create multiple boxes for your videos.

Quick Links:

• One Video
• Two Videos
• Three Videos

Yes, you will still want to position and size one video. If you don't, it'll be huge on the page (like it probably is right now).

1. Open your guide in preview mode (the eyeball near where you would publish your guide). This should open the preview in a new tab.
2. On the preview page, right-click on the video image and select Inspect. If you can't right-click on the video, click just underneath the video player.
3. You're looking for one piece of information, the content ID (s-lg-content-[number]) for the video. When you're looking over the pop-up that opens, you'll want to work your way up from the highlighted blue or grey section. The first s-lg-content-[number] you find is the one you want. It's critical that you go in order and grab the correct code; otherwise, it won't work.
4. In our sample, starting from the blue highlighted section, as we move up the page, the first s-lg-content-[number] is s-lg-content-59187519. This is the number we're looking for. You can double-click on the ID in the pop-up to copy it from the page.
   
    
5. Back on the edit page for your guide, click the image icon in the upper right-hand menu and select Guide Custom JS/CSS.
   
    
6. You will need to add style tags in the box if they aren't there. If they are there, you can add your CSS underneath the last piece of CSS, but before the closing style tag.
   
    
7. For this example, let's pretend that our style tags aren't there. Here's the CSS we’re going to add to the box. Note the s-lg-content-[number] entry. You'll change this to the correct ID for your page.

   <style>

   @media (min-width:792px){
   #s-lg-content-59187519{
       width: 50%;
       margin-left: 25%;
       margin-right: 25%;
   }}

   </style>
   

Voila! You have a video that is no longer hideous.

Note: You can change the width and margin percentages if the video looks too small or too big on your guide. The width and margin percentages must equal 100% when you have a single video. For example, you can have a video with a width of 40%, with margins of 30% each.

You have two videos. Let's do this.

1. Open your guide in preview mode (the eyeball near where you would publish your guide). This should open the preview in a new tab.
2. Right-click on the top video image on the preview page first and select Inspect. If you can't right-click on the video, click just underneath the video player.
3. You're looking for two pieces of information, the videos' content IDs (s-lg-content-[number]). When you're looking over the pop-up that opens, you'll want to work your way up from the highlighted blue or grey section first. It's critical that you go in order and grab the correct code; otherwise, it won't work.
4. In our sample, starting from the blue highlighted section, as we move up the page, the first s-lg-content-[number] is s-lg-content-59188233. You can double-click on the ID in the pop-up to copy it from the page.
   
    
5. If you're crafty (or experienced), you can leave the pop-up to get the third piece of information. However, if you're new at this, I recommend closing the pop-up and right-clicking on the second video. If you can't right-click on the video, click just underneath the video player. Select Inspect.
6. As with the first video, work your way up from the highlighted section and find the first s-lg-content-[number]. In this case, it's s-lg-content-59188242.
   
    
7. Back on the edit page for your guide, click the Image icon in the upper right-hand menu and select Guide Custom JS/CSS.
   
    
8. You will need to add style tags in the box if they aren't there. If they are there, you can add your CSS underneath the last piece of CSS, but before the closing style tag.
9. For this example, let's pretend that our style tags are there. If you have two videos from the same vendor or videos from Vimeo, YouTube, or Films on Demand, here's the CSS we'll add to the box. Note the s-lg-content-[number] and s-lg-box-collapse-[number] entries. You will change these to the correct IDs for your page. The video that goes on the left will typically be the first video on the list, and the second video will go on the right.
   
   @media (min-width:792px){
   #s-lg-content-59188233, #s-lg-content-59188242{
       width:49%;
       display: inline-block;
       text-align: left;
   }
   #s-lg-content-59188242{
       float: right;
   }
   #s-lg-content-59188233{
       float: left;
   }}
   
    
10. If you have two videos from different library vendors (for example, Academic Video Online and Films on Demand) or from Academic Video Online and YouTube or Vimeo, you will want to add a max height to the images in your box. You may need to tweak the max height to get the images to display correctly.
    
    #s-lg-box-25674161 img{
        max-height: 322px;
    }
    
    @media (min-width:792px){
    #s-lg-content-59188233, #s-lg-content-59188242{
        width:49%;
        display: inline-block;
        text-align: left;
    }
    #s-lg-content-59188242{
        float: right;
    }
    #s-lg-content-59188233{
        float: left;
    }}
    
    

11. You may also need to size your image so that it spans the space it's in. You'll need to add some code to your original video widget.
    
    <div class="video-play">
        <img src="https://cdnsecakmi.kaltura.com/p/1067292/sp/106729200/thumbnail/entry_id/0_tiedhpa1/version/100011/acv/171/width/900" alt="two people speaking about accounting" style="width:100%;" />
        <button class="btn btn-default" onclick="window.open('https://widgets.ebscohost.com/prod/customlink/proxify/proxify.php?count=1&encode=1&proxy=https%3A%2F%2Fgo.openathens.net%2Fredirector%2Fphoenix.edu%3Furl%3D&target=https://fod.infobase.com/PortalPlaylists.aspx?wID=18566&xtid=114815');" type="button">
            <div class="play-icon">
                <svg viewBox="0 0 20 20" preserveAspectRatio="xMidYMid" focusable="false" aria-labelledby="play-icon-title" role="img">
                    <title id="play-icon-title">Play</title>
                    <polygon class="fill" points="1,0 20,10 1,20"></polygon>
                </svg>
            </div>
        </button>
    </div>
    <div class="video-title">
        <a href="https://widgets.ebscohost.com/prod/customlink/proxify/proxify.php?count=1&encode=1&proxy=https%3A%2F%2Fgo.openathens.net%2Fredirector%2Fphoenix.edu%3Furl%3D&target=https://fod.infobase.com/PortalPlaylists.aspx?wID=18566&xtid=114815" target="_blank">Accounting: When Am I Ever Going to Use This? (19:32)</a>
    </div>
    <div class="video-text">
        Discover why accounting is the backbone of every business, how an accounting system works, and learn about potential career opportunities. You'll also be introduced to working professionals who demonstrate how they use their accounting skills to succeed in their careers and personal lives.
    </div>

You're here. You've made it. The grandest of them all…

THREE VIDEOS.

1. Open your guide in preview mode (the eyeball near where you would publish your guide). This should open the preview in a new tab.
2. Right-click on the top video image on the preview page first and select Inspect. If you can't right-click on the video, click just underneath the video player.
3. You're looking for four pieces of information, the content IDs (s-lg-content-[number]) for the videos and the box collapse ID (s-lg-box-collapse-[number]) for the box. When you're looking over the pop-up that opens, you'll want to work your way up from the highlighted blue or grey section first. It's critical that you go in order and grab the correct code; otherwise, it won't work.
4. In our sample, starting from the blue highlighted section, as we move up the page, the first s-lg-content-[number] is s-lg-content-59188233. You can double-click on the ID in the pop-up to copy it from the page.
   
    
5. While we're here, let's keep moving up to find the s-lg-box-collapse-[number]. It's s-lg-box-collapse-25674244.
   
    
6. If you're experienced, you can leave the pop-up to get the third and fourth pieces of information. However, if you're new at this, I recommend closing the pop-up and right-clicking on the second video. If you can't right-click on the video itself, click just underneath the video player. Select Inspect.
7. As with the first video, work your way up from the highlighted section and find the first s-lg-content-[number]. In this case, it's s-lg-content-59188420.
   
    
8. Again, close the pop-up and right-click on the last video (or just underneath if you can't right-click on the video player). Select Inspect.
9. We're looking for the last s-lg-content-[number] and, moving upward, it's s-lg-content-59188425.
   
    
10. Back on the edit page for your guide, click the Image icon in the upper right-hand menu and select Guide Custom JS/CSS.
    
     
11. You will need to add style tags in the box if they aren't there. If they are there, you can add your CSS underneath the last piece of CSS, but before the closing style tag.
12. For this example, let's pretend that our style tags are there. If you have three videos from the same vendor or videos from Vimeo, YouTube, or Films on Demand, here's the CSS we'll add to the box. Note the s-lg-content-[number] and s-lg-box-collapse-[number] entries. You will change these to the correct IDs for your page. The video that goes on the left will typically be the first video on the list, and the third video will go on the right.
     

    #s-lg-box-collapse-25674244{
        text-align: center;
    }

    @media (min-width:792px){
    #s-lg-content-59188414, #s-lg-content-59188420, #s-lg-content-59188425{
        width:33%;
        display: inline-block;
        text-align: left;
    }
    #s-lg-content-59188425{
        float: right;
    }
    #s-lg-content-59188414{
        float: left;
    }}
    
     

13. If you have three videos from different library vendors (for example, Academic Video Online and Films on Demand) or from Academic Video Online and YouTube or Vimeo, you will want to add a max height to the images in your box. You may need to tweak the max height to get the images to display correctly.
    
    #s-lg-box-collapse-25674244{
        text-align: center;
    }
    
    #s-lg-box-collapse-25674244 img{
        max-height: 210px;
    }
    
    @media (min-width:792px){
    #s-lg-content-59188414, #s-lg-content-59188420, #s-lg-content-59188425{
        width:33%;
        display: inline-block;
        text-align: left;
    }
    #s-lg-content-59188425{
        float: right;
    }
    #s-lg-content-59188414{
        float: left;
    }}
    
    

14. You may also need to size your image so that it spans the space it's in. You'll need to add some code to your original video widget.
    
    <div class="video-play">
        <img src="https://cdnsecakmi.kaltura.com/p/1067292/sp/106729200/thumbnail/entry_id/0_tiedhpa1/version/100011/acv/171/width/900" alt="two people speaking about accounting" style="width:100%;" />
        <button class="btn btn-default" onclick="window.open('https://widgets.ebscohost.com/prod/customlink/proxify/proxify.php?count=1&encode=1&proxy=https%3A%2F%2Fgo.openathens.net%2Fredirector%2Fphoenix.edu%3Furl%3D&target=https://fod.infobase.com/PortalPlaylists.aspx?wID=18566&xtid=114815');" type="button">
            <div class="play-icon">
                <svg viewBox="0 0 20 20" preserveAspectRatio="xMidYMid" focusable="false" aria-labelledby="play-icon-title" role="img">
                    <title id="play-icon-title">Play</title>
                    <polygon class="fill" points="1,0 20,10 1,20"></polygon>
                </svg>
            </div>
        </button>
    </div>
    <div class="video-title">
        <a href="https://widgets.ebscohost.com/prod/customlink/proxify/proxify.php?count=1&encode=1&proxy=https%3A%2F%2Fgo.openathens.net%2Fredirector%2Fphoenix.edu%3Furl%3D&target=https://fod.infobase.com/PortalPlaylists.aspx?wID=18566&xtid=114815" target="_blank">Accounting: When Am I Ever Going to Use This? (19:32)</a>
    </div>
    <div class="video-text">
        Discover why accounting is the backbone of every business, how an accounting system works, and learn about potential career opportunities. You'll also be introduced to working professionals who demonstrate how they use their accounting skills to succeed in their careers and personal lives.
    </div>

If you've made it this far, congrats, video ninja! Adding videos isn't easy, so pat yourself on the back, give yourself a high five, and splurge on an extra piece of candy. You've earned it.

(And take a break. Seriously. You've probably been at this awhile.)

Occasionally you may, on occasion, find it helpful to add a line between your video and non-video content. It can help partition the content and anchor the videos on the page. To do this:

1. Open your Rich Text / HTML section or add one to the box above or below the videos, depending on where you want the line. Remember - only videos can go in video boxes, so do not add this to your video box.
2. In the edit screen, click on Source.
3. At the very top or the very bottom of your code (again, depending on where you want the line), on a new line, type or copy from here <hr />. Note that there is a space between the r and the /.
4. Click Save and Close to add an awesome line.