Embedding Youtube videos

What is the Embedding Youtube videos plugin?

By inserting an <a> tag containing a video link in your HTML page, the EclipseFdn Videos plugin will convert that tag into the iframe video if the user agreed to use cookies.

Note: This plugin only supports Youtube videos for now.

Usage

With Solstice

<head>
  <script>
    // Use defaults
    eclipseFdnVideos.replace();

    // Customize
    eclipseFdnVideos.replace({
      selector: ".eclipsefdn-video",
      resolution: "16by9",
      cookie: {
        name: "eclipse_cookieconsent_status",
        value: "allow"
      }
    });
  </script>
</head>
<body>
  <a class="eclipsefdn-video" href="https://www.youtube.com/watch?v=cnSMhgKApOg"></a>

  <!--
  <a> will be replaced with:
  <div class="eclipsefdn-video embed-responsive embed-responsive-16by9" style="height:312.1875px;"><iframe src="https://www.youtube.com/embed/cnSMhgKApOg"></iframe></div>
  -->
</body>

Without Solstice

If you are not using the Eclipse Foundation look and feel, you can still load our Embedding Youtube videos plugin like the following example:

<head>
  <script src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/javascript/eclipsefdn.videos.min.js"></script>
  <link href="//www.eclipse.org/eclipse.org-common/themes/solstice/public/stylesheets/eclipsefdn-video.min.css" rel="stylesheet" type="text/css">

  <script>
    // Use defaults
    eclipseFdnVideos.replace();

    // Customize
    eclipseFdnVideos.replace({
      selector: ".eclipsefdn-video",
      resolution: "16by9",
      cookie: {
        name: "eclipse_cookieconsent_status",
        value: "allow"
      }
    });
  </script>
</head>
<body>
  <a class="eclipsefdn-video" href="https://www.youtube.com/watch?v=cnSMhgKApOg"></a>

  <!--
  <a> will be replaced with:
  <div class="eclipsefdn-video embed-responsive embed-responsive-16by9" style="height:312.1875px;"><iframe src="https://www.youtube.com/embed/cnSMhgKApOg"></iframe></div>
  -->
</body>

Parameters

Name Type Description
selector (optional) String By default the class "eclipsefdn-video" is being used but you can specify your own selector.
resolution (optional) String By default the resolution of the video is 16by9 but you can also choose to use the 4by3 resolution. Note that only these two resolutons are accepted.
cookie (optional) Object By default we are using the cookie name "eclipse_cookieconsent_status" and value "allow" which enables the plugin to replace the link by the iframe video only if users have given consent to use cookies. But you can choose to use your own cookie name and values.

Example: