embed vimeo video in a responsive way 2016-11-08T10:16:15+00:00

homepage Forums Cassiopeia embed vimeo video in a responsive way

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • arennertz
    Participant
    Post count: 21

    is it possible? i tried shortcodes, like so: [vimeo 76349074].

    Got that from here: https://en.support.wordpress.com/videos/vimeo/

    but it just displays [vimeo 76349074] in the post. if i use an iframe it works, but it has a fixed size and is therefore not responsive.

    code:

    <iframe src="https://player.vimeo.com/video/76349074?color=ffffff&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

    site:

    is it somehow possible to have the video with the images, so that it would resize as nice as they do?

    Studio Radiuzz
    Keymaster
    Post count: 1124

    HI

    i think yes, 🙂
    in your code:

    
    <iframe src="https://player.vimeo.com/video/76349074?color=ffffff&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    

    replace width 640 to 100%

    
    <iframe src="https://player.vimeo.com/video/76349074?color=ffffff&title=0&byline=0&portrait=0" width="100%" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    
    arennertz
    Participant
    Post count: 21

    your answer was a step in the right direction, but the height didn’t scale.
    inspired by your answer i hacked this together from several tutorials.

    <div class="embed-container">
     <iframe src="https://player.vimeo.com/video/76349074?color=ffffff&title=0&byline=0&
      portrait=0" 
      width="640"
      height="360" 
      frameborder="0" 
      allowfullscreen="allowfullscreen">
     </iframe>
    </div>
    <style>
    iframe {
      max-width: 100%;
    }
    .embed-container {
      position: relative; 
      padding-bottom: 56.25%; /* ratio 16x9 */
      height: 0; 
      overflow: hidden; 
      width: 100%;
      height: auto;
    }
    .embed-container iframe {
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
    }
    </style>

    now it works with the height too. but the code is quite ugly. can this sit at some more general point for every embed-container(sorry, html/css/wordpress newbie here 😀 )
    thanks already!!

    Studio Radiuzz
    Keymaster
    Post count: 1124

    hi arennertz

    Cool, 🙂 i see you are learning fast 🙂
    I see you are using some sort of css codes, this is normal, i can suggest to save this css code in Cassiopeia options > css settings,:)

    arennertz
    Participant
    Post count: 21

    I put this in the css settings as you said, now it works everywhere!

    nice!

    you can mark this as solved, thanks!

    Studio Radiuzz
    Keymaster
    Post count: 1124

    you are welcome 🙂

    case closed

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘embed vimeo video in a responsive way’ is closed to new replies.