Verkkolähetyksien upottaminen

Alla on kuvattu Eduskunnan verkkolähetysten upotuskoodien käyttö. Jokaisella verkkolähetyksellä on oma uniikki osoite (URL) jonka loppuosa on admin-käyttäjän itse määriteltävissä (urlName). Esimerkiksi https://verkkolahetys.eduskunta.fi/fi/taysistunnot/taysistunto-181-2018. Normaalien täysistuntojen kohdalla osoitteen loppuosa on ennustettavissa istunnon numeron (181) ja vuoden (2018) perusteella.

Videoiden upotuskoodien osoitteen alkuosa on aina https://eduskunta.videosync.fi ja loppuosa admin-käyttäjän määrittelemä urlName. Eli upotuskoodi esimerkkivideolle on:

<div class="player-wrapper">  
  <iframe src="https://eduskunta.videosync.fi/taysistunto-181-2018?embed-view=1" allowfullscreen width="100%" height="282" scrolling="no" allowfullscreen frameborder="0"></iframe>
</div>

Upotuskoodin responsiivisuus

Vaihtoehto 1: Iframe-resizer

Upotuskoodista voidaan tehdä responsiviinen käyttäen iframe-resizer kirjastoa.

Upotuskoodi iframe-resizer kirjaston kanssa

<iframe src="https://eduskunta.videosync.fi/taysistunto-181-2018?embed-view=1" allowfullscreen width="100%" height="282" scrolling="no" allowfullscreen frameborder="0"></iframe>

<script type="text/javascript" src="//cdn.videosync.fi/assets/iframe-resizer/js/iframeResizer.min.js"></script>
<script>iFrameResize()</script>

Vaihtoehto 2: CSS

Jos iframe-resizerin kayttö ei ole jostakin syystä mahdollista, voit tehdä upotetusta videosta responsiivisen lisäämällä sivulle seuraavat CSS-säännöt.

  .player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   }

HUOM: Jos kyseisessä esityksessä on käytössä esityskalvot, kuvasuhde ei ole staattinen 16:9 jolloin täytyy käyttää vaihtoehtoa 1 (Iframe-resizer).

Upotuskoodi kokonaisuudessaan (CSS)
<style>
  .player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   }
 </style>
<div class="player-wrapper">  
  <iframe src="//eduskunta.videosync.fi/27112019_trv?embed-view=1" allowfullscreen width="500" height="282" scrolling="no" allowfullscreen frameborder="0"></iframe>
</div>

Muita huomioita

  • Ennen ja jälkeen liven upotuskoodi näyttää ns “hidden live” ja “hidden ondemand” tekstin, eli videotoistin itsessään on näkyvissä vain liven aikana ja tallenteen julkaisemisen jälkeen.

  • Muut verkkolähetykset, joissa mukana esitysaineistot Eduskunnan verkkolähetyksissä, kuten valiokuntien julkisissa kuulemisissa, voi olla mukana esitysaineistoja. Tällöin upotuskoodi näyttää videosoittimen lisäksi myös mahdolliset esitykseen lisätyt esitysmateriaalit.

Lisätietoja upotuskoodien käyttämisestä ja esimerkkejä löydät osoitteesta täältä

Yhteystiedot

Lisäkysymykset ja palautteet: verkkolahetys@eduskunta.fi