I'm building a portfolio website that contains several embed Vimeo videos and they're slowing down the page loading a lot. So I was thinking of lazy load them so that the browser has to load them only when they actually appear in the page.
I've tried adding the loading="lazy" to the iframe tag but it didn't change anything. So I tried with this code but it seems to work just for one iframe element.
Can you help me understand how to adjust that code to apply the lazyloading to all of the iframe elements in the page?
var iframe = document.querySelector('iframe');
function handleLazyLoad() {
if (iframe.classList.contains('lazyload')) {
const storeSRC = iframe.dataset.src;
iframe.addEventListener('lazyloaded', () => {
delete iframe.dataset.src;
iframe.src = storeSRC;
initPlayer();
});
}
}
function initPlayer() {
var player = new Vimeo.Player(iframe);
player.ready().then(function (){
console.log('player is ready!');
// These events are not attaching? Why?
player.on('play', function () {
console.log('played the video!');
});
player.on('ended', function () {
console.log('the video has ended');
});
});
}
handleLazyLoad();
.content-block {
width: 200px;
height: 2000px;
background-color: red;
}
<div class="content-block"></div>
<iframe class="lazyload" data-src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media"></iframe><div style="position: relative;">
<div style="padding:53.02% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/495827819?autoplay=1&loop=1&color=c9ff23&title=0&byline=0&portrait=0&autopause=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
</div>
<div style="position: relative;">
<div style="padding:53.02% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/495827819?autoplay=1&loop=1&color=c9ff23&title=0&byline=0&portrait=0&autopause=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
</div>
Thank you!
Related
<button type="button" class="action-oser" id="click-vlink2">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 18v-12l10 6-10 6z" style="fill:#fff" /></svg>
</button>
<div id="video-modal2" style="display:none;">
<div class="content-oser">
<iframe width="560" height="315" id="youtube2" src="https://www.youtube.com/embed/JexOJOssGwk?rel=0&enablejsapi=1&origin=https%3A%2F%2Fwww.apetito.co.uk&widgetid=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
modalClass: 'nursery-modal',
'buttons': [{
class: 'action-oser'
}]
};
var popup = modal(options, $('#video-modal2'));
$("#click-vlink2").on('click',function(){
$("#video-modal2").modal("openModal");
});
$('.action-close').on('click', function() {
var video = $("#youtube2").attr("src");
$("#youtube2").attr("src","");
$("#youtube2").attr("src",video);
});
}
);
</script>
I added above script for modal popup video. i added this width="560" height="315" in iframe and it is required size for desktop. But when i'm checking in the mobile devices its not fit according to the mobile device.
How can i make this responsive to the all mobile devices also.
Any help can be appreciated. Thanks!
add a style="" attribute in the <iframe>
with this css code max-width: 100%;
this means that the video iframe in mobile always takes less than the width of the device.
and also the height remain the same, so the content below can be visible.
<iframe style="max-width: 100%;" width="560" height="315" id="youtube2" src="https://www.youtube.com/embed/JexOJOssGwk?rel=0&enablejsapi=1&origin=https%3A%2F%2Fwww.apetito.co.uk&widgetid=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
useful documentations:
- max-width: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
- style attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style
i guess this can help you.
#media screen and (max-width: 750px) {
iframe {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
}
and for more solution example visit :
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
I'm pretty new to JavaScript.
I'm trying to make a YouTube 2.0 html thing, (interesting learning experience). I want it to be so that you click on the "load video" link and it asks you the link to the actual youtube video. Then, when you paste it in, it displays the video on the page.
My code is
<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
Load video
<script>
var theVideoLink;
var openVideo = function() {
var videoLink = prompt("Video link on YouTube.com");
theVideoLink = videoLink;
};
window.onload = function() {
document.getElementById("myLink").innerHTML=theVideoLink;
}
</script>
<iframe width="1120" height="630" src="myLink" frameborder="0" allowfullscreen></iframe>
If you have any ideas on how I can insert the JavaScript variable into my iframe src tag, please tell me. Thanks!
You can't change iframe src but we can replace your iframe with new one.
Note, I have set your iframe ID as myLink, replacing the src attribute.
<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
Load video
<iframe width="1120" height="630" id="myLink" frameborder="0" allowfullscreen></iframe>
<script>
openVideo = function() {
var videoLink = prompt("Video link on YouTube.com");
var iframe=document.getElementById('myLink');
var new_iframe = document.createElement("iframe");
new_iframe.src=videoLink;
let attr;
let attributes = Array.prototype.slice.call(iframe.attributes);
while(attr = attributes.pop()) {
if (attr.nodeName!='src')
new_iframe.setAttribute(attr.nodeName, attr.nodeValue);
}
iframe.parentNode.replaceChild(new_iframe, iframe);
}
</script>
Make sure to embed the embed link, in this format:
https://www.youtube.com/embed/MEVYajbHmb4
Working JS fiddle :
https://jsfiddle.net/aa0kzqsz/2/
In your code, the iframe is wrong. You need to specify "myLink" as id not as src.
Then you need to transform the youtube link (which is like "https://www.youtube.com/watch?v={videoId}") into the iframe link (which is like "https://www.youtube.com/embed/{videoId}"). To achieve this you need to learn about regexp. The following will work:
var ytLink = prompt('Give me a youtube link please !');
var iframe = document.getElementById('youtube');
var ytId = ytLink.match(/v=([-A-Za-z]+)/)[1];
iframe.src = 'https://www.youtube.com/embed/' + ytId;
<iframe width="560" height="315" src="" id="youtube" frameborder="0" allowfullscreen></iframe>
I recommend you to learn more about regex on the MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
This code navigates the <iframe> to URL that typed in prompt dialog.
<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
Load video
<script>
var openVideo = function() {
var videoLink = prompt("Video link on YouTube.com");
window.open(videoLink, "myLink");
}
<iframe width="1120" height="630" name="myLink" frameborder="0" allowfullscreen></iframe>
Update: This code only navigates <iframe> to given URL. You should probably use Youtube embed options instead of this.
You must use embed link instead of full link
like: https://www.youtube.com/embed/videoID
var openVideo = function() {
var videoID = prompt("Video id on YouTube.com");
var embed = 'https://www.youtube.com/embed/'
document.getElementById("myFrame").src=embed+videoID;
};
<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
Load video
<iframe id=myFrame width="1120" height="630" src=# frameborder="0" allowfullscreen></iframe>
I have a responsive site with a carousel. The user can embed a youtube video as one of the slides. On desktop this works fine. On mobile however the iframe apparently eats all the swipe events and you cannot swipe past the video. We had to hack around this by substituting an image of the video and then using window.open() open a new window with the video.
It sucks.
Is there a good way to overcome this?
In short, I discovered I was doing it wrong.
The slider script works very well on both desktop. On mobile it works except you cant swipe past the iframe that embeds the video.
My example iframe is:
<iframe width="1280" height="720" src="//www.youtube.com/embed/Lzbr6fPDmkE" frameborder="0" allowfullscreen></iframe> (fyi, its a funny video if you're an Army vet)
I discovered the (somewhat obvious) fact that youtube has a thumbnail url as well. So on mobile I add the following img tag:
<img src="http://i.ytimg.com/vi/Lzbr6fPDmkE/hqdefault.jpg" alt="1300x650" />
I found the answer in this article
The url I used is different than theirs because I ripped it off of an imbedded youtube thumbnail inside a gmail message.
Its mandatory to include below attribute in URL.
rel=0&enablejsapi=1
Note: Go through comment lines and add those slider library files in head section and save it. once everything added you have to open the file in browser. You can able to see the slider. If find any issue please comment below.
$('.slider').click();
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('videoSwipe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(e) {
$('.youTubeVideo').find('.video').addClass('video-overlay');
}
function OverlayOnVideo(playerStatus) {
if (playerStatus == 2) {
$('.youTubeVideo').find('.video').addClass('video-overlay');
var iframeHeight=$('#videoSwipe').height()-40;
var overlayHeight=$(document).find('.video-overlay');
if ( overlayHeight.length >= 1 ) {
overlayHeight.css('height', iframeHeight+'px');
}else{
$('.youTubeVideo .tube').removeAttr( 'style' );
}
}
}
function onPlayerStateChange(e) {
OverlayOnVideo(e.data);
}
$(document).on("click", ".video-overlay", function() {
if (player) {
player.playVideo();
$('.youTubeVideo').find('.video').removeClass('video-overlay');
$('.youTubeVideo .tube').removeAttr( 'style' );
}
});
.youTubeVideo {
position: relative;
}
#wrapper {
width: 30%;
margin: auto;
}
.slick-list draggable {
margin-top: 3%;
}
body {
outline: none;
background: black;
}
:focus {
outline: none;
}
.slick-list.draggable {
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="slider">
<div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
<div class="youTubeVideo">
<div class="video tube"></div>
<iframe id="videoSwipe" width="465" height="400" src="https://www.youtube.com/embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
</div>
<div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/460" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/440" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/420" alt="" width="500" height="400"></div>
</div>
</div>
I am developing a web game. Now i need to display a webpage, in a dialog, within my game stage.
And i know a solution, using jqueryui:
<div id="swf"></div> <!-- this will be replaced by game flash object -->
<div id="myDialog">
<iframe id="myFrame"></iframe>
</div>
<script>
$("#myDialog").dialog({
open: function(ev, ui){
$("#myFrame").attr("src", "http://xxx");
}
});
</script>
This solution need me to set "wmode" of flash object to be "opaque".
But for performance, i need to use "wmode=direct", and if i use "wmode=direct", the jquery dialog has some ploblem: titlebar is hided behind flash object, so that, i cannot drag(move) the dialog or close the dialog.
Are there other solution, without changing "wmode"? I've seen a solution, but i don't know how to do it. here are some code generated by that solution:
<iframe class="dialog_mask" frameborder="no" scrolling="no" src="about:blank" style="visibility: visible; left: 331px; top: 88px; width: 702px; height: 481px;"></iframe>
<div class="dialog_wrap" style="visibility: visible; left: 331px; top: 88px; width: 700px; z-index: 5007;">
<div class="dialog_header" style="cursor: move;">
<h3>the title</h3>
<button title="close"></button>
</div>
<div class="dialog_content" style="height: 450px;">
<iframe class="dialog_frame" frameborder="no" scrolling="no" src="http://xxx" style="width: 700px; height: 450px;"></iframe>
</div>
</div>
<object type="application/x-shockwave-flash" ...><param name="wmode" value="window"></object>
give the #myDialog div a height and width greater than your flash SWF.
//Below is the Widget.html file. This is the file that i need help with mainly. This part doesn't work like I expected it to. The widget itself works except it wont show the sites. I'm trying to make it to where it shows a Reddit slideshow where the user can select which subreddit they want to view and an option of how to view it(top, hot, rising, controversial). The complete code has 10 subreddits to choose from so far; I cut off eight to shorten the post. When you use it, you can successfully choose a subreddit and option, but when you hit "Add," it just makes a box, so I know my .plist files work. I'm just unsure of how to get this .html file to function properly. Any help would be greatly appreciated.
<body>
<div id="wrapper">
<script type="text/javascript">
$(document).ready(function(){
var inst_a = new Array(); //subreddit selection
var inst_b = new Array(); //options
//gaming
//option1
inst_a[1] + inst_b[11] = '<iframe src="http://www.redditp.com/r/gaming/top/?t=all" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
//option2
inst_a[1] + inst_b[12] = '<iframe src="http://www.redditp.com/r/gaming" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
//option3
inst_a[1] + inst_b[13] = '<iframe src="http://www.redditp.com/r/gaming/rising" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
//option4
inst_a[1] + inst_b[14] = '<iframe src="http://www.redditp.com/r/gaming/controversial/?t=all" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
//news
//option1
inst_a[2] + inst_b[11] = '<iframe src="http://www.redditp.com/r/news/top/?t=all" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
//option2
inst_a[2] + inst_b[12] = '<iframe src="http://www.redditp.com/r/news" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
//option3
inst_a[2] + inst_b[13] = '<iframe src="http://www.redditp.com/r/news/rising" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
//option4
inst_a[2] + inst_b[14] = '<iframe src="http://www.redditp.com/r/news/controversial/?t=all" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
$('#wrapper').html(inst_a[feed] + inst_b[feed]);
});
</script>
</div>
</body>
// Below is the Options.plist that is used for the input from the user. The first set of dict tags is to select the subreddit. The last set is to select the subreddit options(hot,rising,etc.).
<plist version="1.0">
<array>
<dict>
<key>name</key>
<string>feed</string>
<key>type</key>
<string>select</string>
<key>label</key>
<string>Feed</string>
<key>default</key>
<string>News</string>
<key>options</key>
<dict>
<key>News</key>
<string>1</string>
<key>Gaming</key>
<string>2</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>vMode</string>
<key>type</key>
<string>select</string>
<key>label</key>
<string>View Options</string>
<key>default</key>
<string>Hot</string>
<key>options</key>
<dict>
<key>Top</key>
<string>11</string>
<key>Hot</key>
<string>12</string>
<key>Rising</key>
<string>13</string>
<key>Controversial</key>
<string>14</string>
</dict>
</dict>
</array>
</plist>
I think you're approaching this all wrong and most likely due to a lack of
experience writing code. Before I go on into a possible solution for you I'd
highly recommend that you study more about Javascript and general programming
knowledge before moving forward with your next project.
I'm going to step you through solving this problem (at least in the method I'd
recommend) instead of just telling you what will "solve" your problem. So step
one is examing that <iframe> string you're building. Do you see anything
that is the same between all of them?
<iframe src="" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>
<iframe src="" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>
<iframe src="" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>
<iframe src="" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>
<iframe src="" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>
<iframe src="" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>
<iframe src="" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>
<iframe src="" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>
I've removed the URLs to make it more clear the piont here, and as you can see
they're all exactly the same line. This is a prime chance to clean up this
repetitive code. and make it a function.
var buildIframeCode = function(url) {
return '<iframe src="' + url + '" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:320px; height: 480px" ></iframe>';
};
That makes that easier, now lets check out the URLs:
http://www.redditp.com/r/gaming/top/?t=all
http://www.redditp.com/r/gaming
http://www.redditp.com/r/gaming/rising
http://www.redditp.com/r/gaming/controversial/?t=all
http://www.redditp.com/r/news/top/?t=all
http://www.redditp.com/r/news
http://www.redditp.com/r/news/rising
http://www.redditp.com/r/news/controversial/?t=all
Well, they all share the same base, so this is again a prime chance to reuse
that. The URL takes to parameters here, the subreddit and the sort here so
we'll need to take two arguments:
var buildRedditUrl = function(subreddit, sort) {
return "http://www.redditp.com/r/" + subreddit + sort;
};
Now we've got those two setup, anytime an option changes I can just easily do:
buildIframeCode(buildRedditUrl(selectedSubreddit, selectedSort));
And those options don't need number, we can use strings now like:
var reddits = {
"Gaming": "gaming",
"News": "news"
};
var sorts = {
"Top": "/top/?t=all",
"Hot": "",
"Rising": "/rising",
"Controversial": "/controversial/?t=all"
};
You can, of course, load those from a plist file if that is the method you'd
wish to take. And now you're all set to move forward.
To integrate with your example:
$("#wrapper").html(buildIframeCode(buildRedditUrl(reddits[selectedReddit], sort[selectedSort])));