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
Related
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 have this code in JS:
/*
Video play
=========================== */
$("#ytplayer").css({'opacity':'0','filter':'alpha(opacity=0)'});
$( ".start-video" ).on("click",function(){
$('#ytplayer').fadeTo(900, 1);$( ".video-image" ).fadeOut(800);
return false;
});
$(document).on('click', '.start-video', function () {
$(this).fadeOut(800);
player.playVideo();
return false;
});
And I Have this code in HTML:
<div class="col-md-6">
<div class="video-wrapper">
<div class="video-container">
<div id="ytplayer" class="player"></div>
</div>
<button class="start-video"></button>
<div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />
</div>
I don't know where to paste the iFrame from YouTube. Please help.
<div class="col-md-6">
<div class="video-wrapper">
<div class="video-container">
<div id="ytplayer" class="player">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xmVRZr91Qok" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<button class="start-video">Start</button>
<div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />
All you need to do is to add the iframe tag to your ytplayer 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'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.