<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
Related
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!
I am rendering a FB Login button as follows below. I am trying to get the button to render full width on breakpoints below 768px but the width doesn't change via CSS or javascript to adjust the data-width attribute. According to their docs ( https://developers.facebook.com/docs/facebook-login/web/login-button/ ) , the max width is 400px but I know I've seen full screen width buttons before. Any idea on how I can accomplish this?
<div class="fb-login-button"
data-width="200px"
data-scope="email"
data-max-rows="1"
data-size="large"
data-button-type="continue_with"
data-show-faces="false"
data-auto-logout-link="true"
data-use-continue-as="false"
data-onlogin="window.checkLoginState()">
EDIT: Adding rendered markup:
<div id="fb-button">
<div class="fb-login-button fb_iframe_widget" data-width="200px" data-scope="email" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false" data-onlogin="window.checkLoginState()" login_text="" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=203191490405831&auto_logout_link=true&button_type=continue_with&container_width=0&locale=en_US&max_rows=1&scope=email&sdk=joey&show_faces=false&size=large&use_continue_as=false&width=200px">
<span style="vertical-align: bottom; width: 240px; height: 40px;">
<iframe name="f28cb7614377564" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" title="fb:login_button Facebook Social Plugin" src="https://www.facebook.com/v3.2/plugins/login_button.php?app_id=203191490405831&auto_logout_link=true&button_type=continue_with&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FafATJJjxKE6.js%3Fversion%3D43%23cb%3Df3b80f280703dbc%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff1ed62ab87a02c4%26relation%3Dparent.parent&container_width=0&locale=en_US&max_rows=1&scope=email&sdk=joey&show_faces=false&size=large&use_continue_as=false&width=200px" style="border: none; visibility: visible; width: 240px; height: 40px;" class=""></iframe>
</span>
</div>
</div>
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])));