Vimeo showcase in iframe

Status
Niet open voor verdere reacties.
H

Henk48

Gebruiker
Lid geworden
31 okt 2001
Berichten
234
In Vimeo heb ik een showcase gemaakt. Deze showcase wil ik op een html-pagina laten zien. Met de embed-code van Vimeo lukt dat deels, maar de films staan dan niet meer verdeeld over de pagina maar op "een stapel", de rest van de opmaak van de showcase is verdwenen. Normaal gesproken kun je ieder adres in een iframe laten zien. Hier is het woordje embed nodig. Wanneer ik het woordje "embed" weglaat krijg ik een witte pagina te zien. Ik wil in mijn iframe dus hetzelfde zien als wanneer ik rechtstreeks naar https://vimeo.com/showcase/1234567 ga.
Als voorbeeld de code hieronder. Het Vimeo-nummer is hierbij fictief.

Code: 
<!DOCTYPE html>
<html>
  <head>
    <title>iframetest</title>
  </head>
  <body> <iframe src="https://vimeo.com/showcase/1234567/embed" allowfullscreen=""
      style="position:absolute;top:0;left:0;width:100%;height:100%;"
      frameborder="0"></iframe>
  </body>
</html>
 
Laatst bewerkt door een moderator:
Als je het op smartphone, tablet, laptop en monitor goed wilt weergeven dan moet de iframe responsive worden gemaakt. Dat wil zeggen dat de breedte van de iframe zich aan de breedte van het beeldscherm aanpast. De hoogte/breedte verhouding van de iframe blijft hetzelfde. Het percentage bij padding-top (bijvoorbeeld 75%) is de hoogte/breedte verhouding van de iframe. Met dit percentage kan je experimenteren.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iframetest</title>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.embed {
  display: block;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
  padding-top: 75%;
}
.embed::before {
  display: block;
  content: "";
}
.embed iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>
</head>
<body>
<div class="embed">
<iframe src="https://vimeo.com/showcase/1234567/embed" allowfullscreen></iframe>
</div>
</body>
</html>

Zelf heb ik geen Vimeo account maar misschien kan je een screenshot laten zien.
 
Laatst bewerkt:
Bij de showcase-link moet ik inloggen
En bij de embed -link krijg ik gewoon een volledig scherm, uiteraard wel een 'this album is deleted'.

Misschien werkt een werkende link beter.
 
Waar het mij om gaat is dat ik binnen het iframe hetzelfde wil zien als wanneer ik rechtstreeks naar Vimeo ga
Klik om te vergroten...
Dat is zeer waarschijnlijk niet mogelijk. Bijvoorbeeld bij YouTube, die ik wel eens als iframe op een pagina zet, is de iframe totaal anders dan de YouTube pagina zelf. Wat je vraagt gaat je niet lukken omdat de meeste websites (en zeker Vimeo) dit hebben afgeschermd, bijvoorbeeld met X-Frame-Options = SameOrigin
 
Laatst bewerkt:
Dat was eigenlijk ook al mijn conclusie. Waarschijnlijk vindt Vimeo niet goed wat ik van plan was. Helaas.
Anyway bedankt voor het meedenken.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan