Video Embeds

ways to embed video in grid sites..

well this works.. from homepage to own page.. notice it resizes itself.. always fitting the embedded window … new code I would suggest using this :

<style>
.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="container">
<iframe src="embed.ted.com/talks/anil_seth_how_your_brain_hallucinates_your_conscious_reality" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen class="video"></iframe>
</div>

You can get the code from developers.facebook.com, and then just need to know the url of the facebook video.. In the configurator, the width was set at 800px, as it’s going on the home page.. BUT.. what they don’t seem to mention on the fb page, is you can change the code.. so I made it data-width=”auto” when pasting the code on the site… now you can see on this page, and its own page.. it just fills the embedded window fully :)

example of the fb embed code :

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10&appId=1372389376171059";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="facebook.com/GTechnology/videos/10155755083417580" data-width="auto" data-show-text="false"><blockquote cite="facebook.com/GTechnology/videos/10155755083417580" class="fb-xfbml-parse-ignore"><a href="facebook.com/GTechnology/videos/10155755083417580">NAB 2017-G-SPEED SHUTTLE XL</a><p>Need to offload video footage and store backups quickly and easily? Learn how the new ev Series G-SPEED Shuttle XL with Thunderbolt 3 offers fast workflow solutions via AbelCine.</p>Posted by <a href="facebook.com/GTechnology">G-Technology</a> on Thursday, 27 April 2017</blockquote></div>

interestingly it asks for the size as you get the embed code.. but that doesn’t mean we can’t change it… right ? The original embed code from vimeo is :

<iframe src="player.vimeo.com/video/219709265?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The width and height are fixed, but we can just use the same code as we did before to get the fluid resizing from the home page to it’s own page..

embed code used :

<style>
.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="container">
<iframe src="player.vimeo.com/video/219709265?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video"></iframe>
</div>