Creating Video Displays

How to Embed a Responsive YouTube Video in Omeka

Embedding a YouTube video into Omeka can be made responsive by adjusting the embed code after pasting it into the Omeka editor. This will ensure the video adjusts automatically to different screen sizes.

Step 1: Find the YouTube Video

1. Go to YouTube and find the video you want to embed.
2. Click the Share button below the video.
3. In the pop-up window, select Embed.
4. Copy the embed code that YouTube provides.

Step 2: Paste the Embed Code in Omeka

1. Log into Omeka with your admin credentials.
2. Navigate to the Items or Exhibits section:
   • For items, select the item you want to edit and click Edit.
   • For exhibits, go to the Exhibits section, choose the page where you want to embed the video.
3. In the text editor, click the HTML or Source button to switch to HTML mode.
4. Paste the YouTube embed code directly into the HTML editor.

Step 3: Modify the Embed Code for Responsiveness

1. Once you have pasted the embed code into Omeka, locate the part of the code that specifies the width and height:

   html

   Copy code

   <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2. Change the width to 100% so that the video adjusts to the screen size:

   html

   Copy code

   <iframe width="100%" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. Save the changes to your exhibit or item page.

Step 4: Preview and Test

1. After saving, preview the page to ensure the video displays correctly.
2. Test how the video adjusts on different devices (desktop, tablet, and mobile) to confirm that it resizes properly.