I'm trying to make a video gallery with fancybox using some of the tutorials I found for image galleries, but I'm not sure if this is what I'm looking for. All I have is an icon that displays a fancybox with all my iframes I and want to transform the video container into a video gallery.
This is my HTML:
<a id="videoIcon" href="#video" class="fancybox">
<img src="http://megaicons.net/static/img/icons_sizes/8/178/512/photo-video-start-icon.png" width="33" height="33">
</a>
<div id="video" style="display: none;" data-fancybox-group="gallery">
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2plsuh" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn6zo" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn66h" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pjpvg" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn6wd" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn61r" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2p5add" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2or2yc" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2of336" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
</div>
And this is my JS:
$(document).ready(function() {
$("a#videoIcon").fancybox();
$(".fancybox_iframe").fancybox({
type : 'iframe'
});
});
Here's a DEMO
Thank you and sorry for my bad English
P.S: The iframes are obtained using an ajax call and placing the response in a template with Handlebars.js, so the div that contains all the videos is actually empty at the beginning. Nevertheless, I don't think this is relevant for the solution.
Related
I have a video page displaying youtube videos that some of our customers have made, but I would like them to shuffle/randomize on page load. I tried a few scripts from around the web, but to no avail. Did not include css as i don't believe it's relevant, but if it is just let me know. Thank you
// This script is one of the ones i found online somewhere
$(function() {
var parent = $(".video-page-wrap");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-page-wrap d-flex">
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/aMxWn63mEWc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/HLIrLLqpACE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/eH61UnQDq1k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/K1so5z8CzOM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/KWGx5WKtJpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/E2-tZsr3FKE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/8ib4b-ie29Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/J9_lAcsFCwQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bSUezxWuRCk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/aRCHbJPqfBU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/KNDWQALC0RA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex-fill video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BWgLAXamLS8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
In a website I'm working on I have 3 embedded youtube iframes that are offscreen. I put loading="lazy" on all of them to optimize my website. I have latest chrome version with all necessary flags enabled. All have width and height and are not hidden with any css. But when the main page loads up, all the scripts and data related to the videos are immediately fetched, even before scrolling down to them. Anyone has an idea why it happens?
const Videos = () => {
return (
<div className="row pt-5 pb-5">
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
</div>
)
}
It's Possible to get : "MyTextTarget" in div in: domain2/file.html from this iframe using javascript postMessage ?
<div class="c1">
<iframe name="name1" id="name1" src="http://domain/file.html" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" scrolling="no" width="100%"></iframe>
</div>
in domain/file.html :
<div class="c2_ " >
MyTextTarget
</div>
I am embedding a link into an iframe:
<div class="container hidden" id="timeline" style="position: relative;">
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="timeline_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
</div>
It's not occupying the entire window. But it occupies a small rectangle. I played around with other options:
https://v4-alpha.getbootstrap.com/utilities/responsive-helpers/
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
This worked for me:
<!-- Timeline Viewer -->
<div class="container hidden" id="timeline">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%" allowfullscreen="true" frameborder="0" id="timeline_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
I have more iframe in my page to load the video.
Now I want to prevent the iframe auto load when I opening the page.
What is happening now is all iframe will load when I opening the page.
<div id="youtube-customers-add" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ivlfaPPP8TY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-customers-edit" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/8LupmPYSYIo" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-dashboard" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/viCPPRHohSs" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/MYneEOIJYp0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance-add" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/CEeuWTqjhQY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance-edit" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/p-NSAonIhgA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-payments" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/pURkv_rng-Y" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-partslabor" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5Ik7WVRxs7c" frameborder="0" allowfullscreen></iframe>
</div>
So, how can I prevent that?
Thanks
Here you are:
for (var i = 0; i < window.frames.length; i++) {
if (navigator.appName == 'Microsoft Internet Explorer') {
window.frames[i].document.execCommand('Stop');
} else {
window.frames[i].stop();
}
}
Hope this help.
You can rename src attribute
src-a="https://www.youtube.com/embed/p-NSAonIhgA"
I think you want to load iframe on some event, so you should use JavaScript, i think you need jQuery when element becomes visible