I am trying to embed Facebook videos on my website. However like many before me I am struggling with sizing them.
Following the official documentation, I realized that the first way of doing it (with the js SDK) provided an easy method to have adjustable videos, but was about twice as slow as using the iframe. But of course in the latter case, only the width of the video will adjust to its container.
I tried accessing the iframe's data to fetch the video's original height and CSS to adjust its width based on code samples I found on the internet, but can't due to same origin policy.
https://codepen.io/Angc/pen/ExYGNOO
<div class="root">
<div id="35-365098" class="embed-iframe-facebook">
<div>
<iframe id="iframe-35-365098" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdestanie.wagner%2Fvideos%2F2391334934255393%2F&show_text=0" style="border:none;" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0"> </iframe>
</div>
<span class="origin-url" hidden="">https://www.facebook.com/destanie.wagner/videos/2391334934255393/</span>
</div>
</div>
.embed-iframe-facebook {
max-width: 300px;
}
.embed-iframe-facebook div {
position: relative;
height: 0;
padding-top: 178%;
}
.embed-iframe-facebook iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Furthermore, I can't seem to find a way to tell the iframe to "adjust its size to its content". Ideally I would want to do that, and detect its height so I can adjust its width, to create an artificial "max-height".
My question is therefore: how can I have the iframe adjust its height to the embedded video ?
It's possible to let an iFrame fill its parent div.
For example:
.container {
display: block;
height: 100vw;
}
.iframeContainer {
display: block;
width: 100%;
height: 100%;
padding: 0px;
clear: both;
}
.embed-area {
clear: both;
width: 100vw;
}
And use the following HTML markup.
<div class="root">
<div class="container">
<div class="embed-area">
<div class="iframeContainer">
<!-- Render the iFrame in this div. -->
<!-- It will now fill up the div, unless other style rules are preventing it. -->
</div>
</div>
</div>
</div>
Related
I am currently creating a custom media player for a customer with HTML and javascript. The customer only needs to add an empty element containing necessary data-attributes (such as preview-image, srcset, URL) to the site for the script to create a player unit.
The image and the media are siblings within the wrapping parent.
A click on the play button basically just hides the image and displays the media.
Player unit markup:
<div class="wrapper">
<img class="preview-img" src="...">
<button class="play-button">Play</button>
<iframe class="embedded-media hidden">...</iframe>
</div>
The website owner now wants the size of the player to be dependent on the size of the preview image or srcset.
I tried to use the image as wrapper, but it's not a container element.
Is there any way to size the parent depending on the images size?
Set any other element (except the image) inside the wrapper absolute and wrapper itself a inline-block, to allow automatic width. Then image makes wrapper to be the same ratio or size as itself.
When hiding the image after click, use relative positioning and z-index lower than the iframe (for example 10 in my example).
Set iframe size to 100%/100% to cover the same area as image and wrapper.
<style>
<!--
.wrapper {
display: inline-block;
position: relative;
}
.play-button {
position: absolute;
z-index: 30;
top: 0;
left: 0;
color: red;
}
.preview-img {
position: relative;
z-index: 40;
display: block;
width: 500px;
}
.embedded-media {
position: absolute;
z-index: 20;
top: 0;
left: 0;
}
-->
</style>
<div class="wrapper">
<img class="preview-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png">
<button class="play-button">Play</button>
<iframe class="embedded-media hidden">...</iframe>
</div>
Example of a post card
I know they use an absolutely positioned link tag one level below the root element and sized it to fill the width and height of the card. But I can't figure out how you can still click on individual links without the full size link blocking it.
<article>
<a id="full sized link"></a>
<div id="actual content">
<h3>
<a id="individual link">TITLE</a>
</h3>
</div>
</article>
Here is roughly how the cards are structured.
I think them may be using JavaScript to redirect you.
Try the anchor tag you want to target to set
<a id="full-sized-link" href='#' ></a>
#full-sized-link{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
z-index: 1;
}
article{
position:relative;
}
And on individual links higher z-index
#individual-link{
position: relative;
z-index: 2;
}
So I'm making myself a website and I have hit a brick wall. I would like to know if it is possible to use JavaScript to get the height of a floated object, and set the height of another object with this floated object's height. Basically the second object would ideally be the same height as the floated object, which just so happens to be a video with an id attribute. I would like to know if this is even possible? And if so, how to do it?
So far this is the code I have:
Two examples of the HTML blocks:
<div class="vidFloat" id="vidFloat">
<div class="floatL"><video id="vid" src="../vid/videoname.mp4" type="video/mp4" controls></video></div>
<h2>this video...</h2><p>hi there</p>
</div>
<div class="vidFloat" id="vidFloat">
<div class="floatR"><video id="vid" src="../vid/videoname.mp4" type="video/mp4" controls></video></div>
<h2>this video...</h2><p>hi there</p>
</div>
JavaScript:
var vidRef = document.getElementById('vid');
var mHeight = vidHeight.offsetHeight;
var contentHeight = document.getElementById('vidFloat').style.height;
if (contentHeight!=mHeight){
contentHeight.style.maxHeight = mHeight;
}
CSS:
.vidFloat{
margin-bottom: 15px;
display: none;
overflow: hidden;
width: 100%;
background-color: rgba(255,255,255,0.2);
}
.floatL {
width: 50%;
float: left;
}
.floatL video{
width: 100%;
}
.floatR {
width: 50%;
float: right;
}
.floatR video{
width: 100%;
}
/*
The following are IDs used in javascript, and then media queries
*/
#vidFloat{}
#vid{}
So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?
Update, here is an illustration of what I kind of what to achieve:
Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).
Portrait img contained within a div does not get it's height set correctly... in FF(27.0.1) only. Works with Chrome, and IE8.
I have the following:
html, body {
margin: 0;
border: 0;
padding:0;
width: 100%;
height: 100%;
overflow:hidden;
}
.photo-container {
position: absolute;
right: 0;
top: 0;
width: 79%;
height: 100%;
overflow-y: auto;
}
img#photo {
margin-top: 0.5%;
max-width: 100%;
max-height: 95%;
}
In the html...
<div class="photo-container">
<div id="pic"></div>
</div>
<script type="text/javascript">
function f_pop(theImg) {
document.getElementById('pic').innerHTML = "<img id='photo' src='" + theImg + "' alt='photo'>";
}
http://jsfiddle.net/isherwood/sFZgn
Notes:
The photograph is portrait orientation.
This works with Chrome and IE8, but not in FF 27.0.1
In the img#photo, I changed the height to 50%. Chrome and IE8
sized the photo down. In FF it was truncated (and required the div's scroll bar to move down).
I initially had this (without the photo-container) as a page in a frameset, that is the hierarchy was body, div id=pic. It worked in that design with FF.
I converted the frameset to a single page with two column (divs), the right side being the photo-container, and now it does not work in FF.
Your help is greatly appreciated.
Thanks.
You need to set a height on #pic:
#pic {
height: 100%;
}
http://jsfiddle.net/isherwood/sFZgn/2/
I solved this by removing the div around the img. (This is what I had in my frameset version, and I'm not sure why I added it to this 2 column div version).
Also changed the photo-container from a class to a id.
So the only change in the CSS is .photo-container becomes #photo-container.
The html
<div id="photo-container">
<img id="photo" src="default.gif" alt="photo">
<div id="blurb"></div>
<div id="contributor"></div>
</div>
The js
document.getElementById('photo').src = pic;
document.getElementById('blurb').innerHTML = blurb;
document.getElementById('contributor').innerHTML = contributor;