Verkkolähetykset

Verkkolähetyksien upottaminen

Tämä ohje kuvaa Eduskunnan verkkolähetyksien upotuskoodien käyttöön.

Jokaisella Eduskunnan livelähetyksellä (ja myöhemmin tallenteella) on oma uniikki URL-osoitteen loppuosa. Esimerkiksi Täysistunnon 1.2.2022 klo 12 osoite tällä verkkolähetyssivustolla on https://verkkolahetys.eduskunta.fi/fi/taysistunnot/taysistunto-1-2022 ja Nuorten parlamenttin 2022 osoite taas on https://verkkolahetys.eduskunta.fi/fi/seminaarit/nuortenparlamentti2022

Näistä osoitteista tarvitset ainoastaan viimeisen / jälkeisen osan: taysistunto-1-2022 tai nuortenparlamentti2022 muodostaaksesi upotuskoodin. Kopioi alla oleva upotuskoodi ja muokkaa kohta taysistunto-1-2022 haluamasi videon osoitteen mukaiseksi.

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

Upotuskoodin responsiivisuus

Riippuen käyttämästäsi verkkosivustosta ja sen sisällönhalllintajärjestelmästä, voit käyttää yhtä alla kuvatuista tavoista mahdollistaaksesi upotuskoodin skaalautumisen eri kokoisille näytöille ja laitteille.

Vaihtoehto 1: Iframe-resizer

Jos pystyt liittämään sivustollesi <script>-tageja, voit käyttää iframe-resizer-kirjastoa seuraavasti:

<iframe src="https://eduskunta.videosync.fi/taysistunto-1-2022?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 toteuttaa responsiivisuuden CSS-määrityksien avulla mikäli kyseisessä tapahtumassa ei ole käytössä esityskalvoja.

Muunna ensin upotuskoodi tähän muotoon (eli upotuskoodin ympärille tulee uusi div-elementti)

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

Syötä lisäksi seuraavat CSS-säännöt sivullesi.

  .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%;
   }

Muita huomioita

• Livetapahtuman ja tallenteen linkki ja upotuskoodi on lähtökohtaisesti sama. Eli jos upotat livetapahtuman, sama upotuskoodi näyttää myös tallenteen heti kun tallenne on julkaistu.
• Upotuskoodi sisältää koko lähetyksen eli täysistunnon kohdalla upotuskoodi näyttää lähetyksen istunnon päättymiseen saakka.
• Videosoitin on näkyvissä vain liven ollessa käynnissä ja sen jälkeen, kun tallenne on julkaistu. Ennen tapahtumaa upotuskoodi näyttää tekstin tulevasta tapahtumasta tai tallenteesta. Voit kokeilla videosoittimen toimivuuden upottamalla jonkin jo aiemmin julkaistun tallenteen.
• 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 lisää esimerkkejä löydät osoitteesta täältä

Yhteystiedot

Lisäkysymykset ja palautteet: verkkolahetys@eduskunta.fi