Filmpjes

[aalsmeer]

De afd. Aalsmeer zou graag enkele korte filmpjes willen plaatsen op de website. Is dat mogelijk en zo ja hoe moet ik dat doen. Kunt u een antwoord sturen naar info@aalsmeer.groei.nl

Henk Kanters

[Ton K]

Ja dat kan.

Voordat je begint moet je eerst even kijken hoe groot de film is die je op de site wilt plaatsen. De maximumgrootte is 256MB. En het kan alleen van het type .mp4 zijn (geen .AVI of .MOV dus).

In TYPO3 ga je naar de bestandenlijst en naar de folder waar je je film in wilt zetten. Het uploaden van het filmpje gaat net zo als afbeeldingen uploaden. Dat lijkt me geen probleem te zijn. Het uploaden van en grote film kan even duren, zeker als je geen snelle internet verbinding hebt.

Als hij gereed is met uploaden ga je naar de pagina waar je het filmpje wil plaatsen. Daar maak je een nieuw inhoudselement aan van het type Tekst en media.

Ga dan naar het tabblad Media en klik op de Add media file knop.

Dmp 0588.gif (10.85 KiB) 729 keer bekeken

In de bestandenlijst kies je dan de film die je zojuist hebt geüpload.

En dan hoef je alleen nog maar de pagina op te slaan en kun jet het filmpje bewonderen aan de voorkant van de site.

Dmp 0590.gif (18.46 KiB) 729 keer bekeken

[Klaas Wilms]

Op de landelijke website (groei.nl) staan filmpjes.
Zoals deze: https://www.groei.nl/bloemschikken/vide ... een-stronk
Daar bestaat de mogelijkheid om hem in groot beeld te bekijken en volgens mij zie je hem dan opeens via youtube.
Of zie je hem de hele tijd via een youtube link?
Hoe werk dan zo'n link naar youtube, terwijl je hem toch (eerst) in de website ziet afspelen?

[Ton K]

Ik zou altijd adviseren om het vanaf YouTube te doen. Dat heeft een aantal voordelen. YouTube werkt op iedere computer, tablet en telefoon, met elk besturingssysteem. Zij hebben ook veel groter servers over de hele wereld staan, die vele malen sneller zijn dan die van Groei & Bloei. En als je video op YouTube staat, word je ook op een andere manier gevonden dan alleen via Google.

Maar goed, los daarvan kun je heel eenvoudig zelf iedere YouTube film op je site plaatsen. Dat gaat als volgt:

1. Je gaat eerst naar het filmpje op YouTube dat je in de site wilt plaatsen.
2. Rechtsklik op het YouTube videootje dat je wilt opnemen in de site. Kies Insluitcode kopieeren (Copy embed code).

   

3. Maak op je website een nieuw inhoudselement aan.
4. Kies onder tabblad 'Speciale elementen' voor 'Alleen HTML'
5. Plak in het HTML code venster de code met <Ctrl> V.
6. Ga naar het begin van de regel die je geplakt hebt. Daar staan de breedte en de hoogte van de video (Width en Height). Wijzig die naar 570 bij 320 zodat ie mooi op de pagina past. Je kunt hier later nog een beetje mee spelen als je een bredere of een hogere video hebt, of als je de rechterkolom op de site niet gebruikt (neem dan 840 x 470) .

   

   Dmp 1100.gif (9.36 KiB) 689 keer bekeken

7. Opslaan en klaar!

[Klaas Wilms]

Bedankt

[Klaas Wilms]

Het plaatsen van video's is gelukt en gezien de reacties is het een succes bij de leden van afdeling noordoostpolder.
Ik heb me gehouden aan de 570x320.
Op een telefoon geeft dat een klein probleem. De rechterkant van de video, het openingsbeeld, past niet op het scherm.
Alleen door te kantelen krijg je het hele beeld.
Op de website groei.nl komt dit probleem niet voor. Daar heb ik een video op verschillende devices bekeken. Het iframe past zich daar aan.
Op de PC zag ik 760x417 en toen ik dezelfde video op de telefoon keek was het 320x417
Blijkbaar kun je bij het plaatsen van de video de code zo maken dat het iframe aangepast wordt, afhankelijk van het ontvangende device.
Omdat groei.nl dezelfde basis heeft dan de afdelingswebsites denk ik dat het op de afdelingswebsite ook kan.
Hoe? Weet iemand dat?

[Ton K]

Bedankt voor je vraag. Ik heb daar nooit bij stilgestaan, dus het was goed om dat uit te zoeken!

En het kan inderdaad. Dan moet je wat meer code intikken (of beter copieren ). Ik zal een volledig voorbeeld geven:

Code: Selecteer alles

<div class="responsive-video">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/mv5JoEm2h3E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<style>
  .responsive-video {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
  }
  
  .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

Of, hoe doe je dat in stappen:
1. Je maakt een HTML inhoudselement aan. Daar plak je de eerste regel code in:
<div class="responsive-video">
2. Dan plak je er de insluitcode in (net als eerder omschreven).
<iframe width="1280" height="720" src="https://www.youtube.com/embed/mv5JoEm2h3E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
3. Verwijder de breedte en de hoogte uit die code (width="1280" height="720")
4. En in plaats daarvan plak je daar de volgende code in:
class="responsive-iframe"
5. En tenslotte plak je onderstaande code nog helemaal onderaan.
</div>
<style>
.responsive-video {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}

.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>

Hiermee heb je het iframe 'responsive' gemaakt zoals dat heet en verschaalt ie mee met de grootte van het scherm waar ie op getoond wordt.

[Klaas Wilms]

Bedankt voor de snelle reactie.
Het verhaal staat nu als word document bij mijn handleidingen.

[Saskia Breebaart]

Goed idee Klaas. Denk dat we het als appendix bij de handleiding op moeten nemen.
Wat vind jij Ton?

[Klaas Wilms]

Bij het aanmaken van een YouTube kanaal bleek de naam noordoostpolder.groei nog vrij te zijn. Handig omdat de naam van de website bijna identiek is.
Ik denk dat voor veel meer afdelingen die nog niet over een eigen kanaal beschikken een soortgelijke naam nog vrij is.