Drupal - Intermediate: Videos in Drupal

Adding Video in Drupal

Adding a YouTube or Vimeo video  can be done by embedding directly in the WYSIWYG Editor by following the instructions below. 

Adding a Panopto video requires you to use an Embed Flexible Content item. Read more about the Embed item in our FLEX:  Basic 2 article.

Embed a Video (YouTube or Vimeo)

To embed a video in the WYSIWYG via the Insert Media button, you would place your cursor where you want the video to appear and then click the Insert Media icon in the toolbar. 

1. Place cursor on a new line where you want your video to appear
2. Press the Insert Media button in the toolbar
   
3. The Media Library modal window will open. The default is that the Remote Audio tab is selected upon opening the modal window.
    
   
   
   
4. First select the Vertical Tab on the left for the type of media you are inserting. In this case it will be the "Video" tab
   
   
   
   
5. You can now choose toUse an existing videoorAdd a new one to the library
   1. Find anExisting Video in the library
      1. Using the Name filter, type a word you think the Name contains and press "Apply filters". This example will yield all the videos whose name contains "class", for instance.  To clear the Name filter, simply delete the phrase you entered and then press "Apply filters" again.
         
         
      2. You can also use the "Table" view by clicking the icon to the right of the filters, incase the Grid view isn't as helpful
         
         
         
         
      3. depending on the view (Grid or Table), click on the video or check the box next to the video you wish to insert
      4. press the "Insert selected" button at the bottom of the modal window
         
         
   2. Add a New Video to the library
      1. visit your video on the web. for example, we are going to the Bryn Mawr College YouTube channel and selecting a video to view.
      2. once there, you can simply copy the URL from the browser address bar
         
         
         
         
      3. then, simply paste that URL into the "Add Video via URL" field and click the blue "Add" button
         
         
      4. this will take you to a different modal window that lets you edit the Name field of the Video.  This field is how you will find the video later in the library.
      5. once you are satisfied you can click the "Save" button
         
         
      6. this takes you back to the library modal, where you can see that the video has a check mark on it. This means it is already selected.
      7. If you are happy that is the video you wish to select, press the "Insert selected" button
         
         
6. Once you are back in the editor, you will see that the video seems small.
   
   
   you can click once on the video to make the Video Dialog appear to adjust how it should appear. 
   1. select the "Video" view mode. This will ensure it displays properly on the page
      
      
      
      
   2. you can also choose to float the video to the right or the left, which will then have the text on the page wrap around it.
      
      
      
      
   3. you can also choose to add a caption to the video
      
      
7. Similarly to an Image, you can use the "Insert Paragraph" before and after buttons that you see if you hover on the video in order to add content before or after the video

Adding Audio in Drupal

Adding a Spotify or SoundCloud audio can be done by embedding directly in the WYSIWYG Editor by following the instructions below. 

Embed an Audio (Spotify or SoundCloud)

To embed an audio in the WYSIWYG via the Insert Media button, you would place your cursor where you want the audio to appear and then click the Insert Media icon in the toolbar.

1. Place cursor on a new line where you want your audio to appear
2. Press the Insert Media button in the toolbar
   
   
   
3. The Media Library modal window will open.
    
   
   
   
4. First select the Vertical Tab on the left for the type of media you are inserting. In this case it will be the "Audio" tab
   
   
   
   
5. You can now choose toUse an existing audioorAdd a new one to the library
   1. Find anExisting Audio in the library
      1. Using the Name filter, type what you think it is called and press "Apply filters"
         
         
      2. You can also use the "Table" view by clicking the icon to the right of the filters, incase the Grid view isn't as helpful
         
         
      3. depending on the view (Grid or Table), click on the audio or check the box next to the audio you wish to insert
      4. press the "Insert selected" button at the bottom of the modal window
         
         
         
         
   2. Add a New Audio to the library
      1. visit your video on the web. for example, we are going to the Global Dispatches podcast on Spotify and selecting a track to use.
      2. once there, you can simply copy the URL from the browser address bar
         
         
         
         
      3. then, simply paste that URL into the "Add Remote Audio via URL" field and click the blue "Add" button
         
         
         
         
      4. this will take you to a different modal window that lets you edit the Name field of the Audio.  This field is how you will find the audio later in the library.
      5. once you are satisfied you can click the "Save" button
         
         
         
         
      6. this takes you back to the library modal, where you can see that the audio has a check mark on it. This means it is already selected.
      7. If you are happy that is the audio you wish to select, press the "Insert selected" button
         
         
         
         
6. Once you are back in the editor, you can click once on the audio to make the Audio Dialog appear. 
   1. Check to see that the "Audio" view mode is default selected. This will ensure it displays properly on the page
      
      
      
      
   2. You can also choose to float the audio to the right or the left, which will then have the text on the page wrap around it.
      
      
   3. You can also choose to add a caption to the audio
      
      
      
      
7. Similarly to an Image, you can use the "Insert Paragraph" before and after buttons that you see if you hover on the audio in order to add content before or after the audio.

Another option to display a video is to have it be part of the Feature Large and Feature Medium Flexible Content Items.

Back to Top ^

Panopto 

The only way to add video from other hosting providers, such as Panopto, is by adding it as an iframe via the Embed Flexible Content Item.

Adding Video via Embed Flexible Content

The Embed Flexible Content Item should only be used for specific code-related embedding needs.  

It is an extra level of permission.  If you don’t have that level of permission, you will see something like this:

If you do have permission to use that Flexible Content Item, you would see a non-WYSIWYG text box appear.  In this example, we will have pasted in the WuFoo embed code so a form will appear on the page.

First step is to copy the embed code from the source.  Copy the embed code from Panopto (or other video hosting site).

In Panopto, there are a few options to check, if desired. 

Here’s a link to the Panopto doc with a video tutorial and details on all of the options: https://support.panopto.com/s/article/Embed-a-Video

Screenshot example of getting iframe code from Panopto. NOTE: “Show Captions” is checked.

Edit the Drupal page you want to add the video to.

Locate the point in your text where you wish to embed the video. If it is in the middle of the WYSIWYG, you will have to add another WYSIWYG then cut the text that should follow the video from WYSIWYG pre-video and paste into the WYSIWYG that should be post-video.

Then, add an Embed Flexible Content item and paste the iframe code into it.

Drag the Embed to be in between the two WYSIWYG

Save the page to see that the video is displayed as expected.

Can’t find your Audio or Video?

Go to Content, select the Media tab and filter by Type= Video or Type=Remote Audio to see all available audio and videos to use in the WYSIWYG.