How to Embed a YouTube Video within a Responsive Website

Follow the steps outlined below to embed a YouTube video within a custom responsive website designed by INSYTE:

  1. First find the video at YouTube.com
     
  2. Below the video, click the Share link (as highlighed in yellow within the screenshot below)
     
  3. Look for the these available choices: ‘Share’, ‘Embed’, and ‘Email
     
  4. Select the option labeled: Embed
     
  5. A text box with the <ifame> embed code will display and is able to be copied to the clipboard.
     
  6. BEFORE coping the code, used the selectable options below the video to decide if you want suggested videos to show up after your video is finished. (Our recommendation is to turn this feature OFF, because you cannot control the videos YouTube suggests, and sometimes they are irrelevant and inappropriate for your site.)
    1. To turn OFF the suggested videos, uncheck the checkbox next to ‘Show suggested videos when the video finishes’, located under the video preview and beneath the ‘Video size’ choices. (When you click this, you should see slight changes in the <iframe> code offered in the textbox.)
    2. Use the Video size option to select the maximum size you want your video to be displayed in your website, by using the the Video Size dropdown menu. (Again, you will see slight changes here to the code provided.)
      How to embed YouTube Code
  7. Once you have the video preferences set up the way you like them, click to select and use Ctrl-A to highlight ALL of the code provided in the text box as referenced in green <iframe> area ini the screenshot above.
     
  8. Copy the code to your clipboard by using: Ctrl-C
     
  9. Log into the CMS and browse to the page you wish to embed the video on.
     
  10. In the WYSIWYG on that page, click the Source button (It is the very first button in the WYSIWYG as displayed in the screenshot below.) Clicking the Source button, the HTML source code is displayed, which produces what is displayed on that page. 
     
  11. Within the code, try to reference textual content to locate the best spot to embed the video.
    YouTube Embed Code in iFrame
  12. Paste the code by using: Ctrl-V
Add the responsive video embed code: Required to allow the video to display properly on any size screen or mobile device.
 
Video Wrapper in DIV Span
  1. Paste the following code before the YouTube embed code: <div class="videoWrapper" style="text-align: center;">
     
  2. Paste the following code after the YouTube embed code: </div>
     
  3. Click Source again.
     
  4. If you have done this right, you will see a white box with the phrase “IFRAME” inside it in red, after you click the Source button.
     
  5. You can use the WYSIWYG buttons to center the video or move it to the right or move it up and down if you wish. (The video will show up in the IFRAME box, but some website may have a CSS style that can over-ride the style related to how the responsive YouTube video can be displayed within the pages of websites developed by INSYTE eCommerce.)
     
  6. Click Save to publish the changes to the page.
     
  7. After saving the changes, preview to the page live by navigating to the page where the video is on the site, and also be sure test the how the video displays on different size screens and devices. It is also a good idea to watch the new video on your site all of the way through to see if the suggested videos show up or if the video just starts over. (Keep in mind the settings selected at YouTube, will cause the video on your website to behave as such.)
 
contact insyte

Please contact the INSYTE support team now if you have any questions or issues while peforming any operations outlined above.
 
images description
Unleash Marketing Potential With Quality Content

Unleash Marketing Potential With Quality Content

Taking the time to consider the techniques involved with creating quality content before wasting time marketing outdated content will allow your marketing campaign to move forward faster.

learn about content marketing
Developing an eCommerce Strategy That Works For Your Company

Developing an eCommerce Strategy That Works For Your Company

It has been found that around two-thirds of people that start a new online store do so without having a customer acquisition plan in place.

plan your eCommerce strategy
images description