Hi, You just need to use the youtube link, foe example: <a class="text-decoration-none lightbox custom-about-play-icon" href="http://www.youtube.com/watch?v=0O2aH4XLbto" data-plugin-options="{‘type’:’iframe’}"> Regards.
Sorry i just host it local. But i recorded a small video where u can see what i mean. Its n problem in the 9.2 version. I cant figure out. the 8.1 workes absolutly fine. Here the video. Its unlisted.
If you watch your own demo, you will see that the problem exists. https://preview.themeforest.net/item/porto-responsive-html5-template/full_screen_preview/4106987?_ga=2.208321618.1933879890.1629152258-1891859897.1629053383
Hello. If you refresh the page and scroll down, the animation of the images in the header of the site disappears. If you just watch, then the animation is always there, but disappears if you scroll down the page and return to the top? It can be fixed? And pay attention to the block with […]
Hello, sure, this is the package.json file: { "name": "porto-admin", "version": "3.1.0", "author": "Okler Themes", "email": "[email protected]", "dependencies": { "@fortawesome/fontawesome-free": "~5.15.2", "animate.css": "~4.1.1", "autosize": "~4.0.2", "bootstrap": "~4.6.0", "bootstrap-colorpicker": "~3.2.0", "bootstrap-datepicker": "~1.9.0", "bootstrap-maxlength": "~1.10.0", "bootstrap-multiselect": "~0.9.15", "bootstrap-timepicker": "~0.5.2", "bootstrap-wizard": "~1.4.2", "boxicons": "~2.0.7", "bs-confirmation": "~1.0.7", "chartist": "~0.11.4", "codemirror": "~5.59.2", "datatables": "~1.10.18", "datatables.net-bs4": "~1.10.23", "dropzone": "~5.7.2", "easy-pie-chart": "~2.1.7", […]
Hello, This type of carousel do not accepts html tag <video> inside. The only way is defining a link inside the item video. For example: <div class="owl-carousel owl-theme manual" id="videos"> <div class="item-video" data-merge="3"><a class="owl-video" href="http://vimeo.com/67957799"></a></div> <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="2"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="1"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="2"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> […]
<section class="section section-default border-0 m-0"> <div class="container py-4"> <div class="row pb-4"> <div class="col-md-8"> <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200"> <h4 class="mt-2 mb-2"><strong>About this</strong> Course</h4> <!– tabs –> <div class="tabs tabs-primary mt-3"><!– change colour with secondary –> <ul class="nav nav-tabs"> <li class="nav-item active"> <a class="nav-link" href="#popularColors1" data-toggle="tab">Programme Content</a> </li> <li class="nav-item"> <a class="nav-link" href="#recentColors1" data-toggle="tab">Benefits</a> </li> <li class="nav-item"> […]
Hello, thanks for your purchase. Here’s the package.json we use to develop the template: { "name": "porto", "version": "8.3.0", "author": "Okler Themes", "email": "[email protected]", "dependencies": { "@fortawesome/fontawesome-free": "~5.15.1", "@icon/linea-arrows": "^1.0.0-alpha.4", "@icon/linea-basic": "^1.0.0-alpha.4", "@icon/linea-basic-elaboration": "^1.0.0-alpha.4", "@icon/linea-ecommerce": "^1.0.0-alpha.4", "@icon/linea-music": "^1.0.0-alpha.5", "@icon/linea-software": "^1.0.0-alpha.5", "animate.css": "^4.1.1", "bootpag": "~1.0.7", "bootstrap": "~4.5.3", "bootstrap-datepicker": "~1.9.0", "bootstrap-star-rating": "^4.0.6", "bootstrap-timepicker": "~0.5.2", "easy-pie-chart": "~2.1.7", "jquery": […]
Hello Ron, The embed URL format do not works. Please use https://www.youtube.com/watch?v=NpSanE49Ge0 instead. We hope this information helps! Please try that and let us know if you need further assistance. Kind Regards, Rodrigo.
Hello, You are copy/pasting the html code from developer tools, that’s a wrong way. You should copy the source code instead. Also include this owl carousel image gallery inside a modal requires some customization. Please follow the instructions below: 1) First use this HTML for modal and image gallery: <button class="btn btn-modern btn-primary" data-toggle="modal" data-target="#defaultModal"> […]
Hi there, i would like to add a photo gallery with full width inside modal. When i copy the code under elements-image-gallery (as per below) it doesnt show on the modal. i am not sure what i am doing wrong. and if i increase the col-lg -4 to 12 it also has a strange behaviour […]
Hello, There are some extra thing you need to do: 1) First change the HTML to: <div class="col-lg-4"> <a href="http://www.youtube.com/watch?v=0O2aH4XLbto" class="popup-youtube">Open YouTube Video</a> </div> 2) Make sure you have the magnific popup stylesheet included in the head of document: <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css"> 3) Make sure you have the magnific popup javascript included on footer of […]
Hi, I am trying to add a vide on my website and i want the same effect as a popup-youtube effect. If i add the example below: <div class="col-lg-4"> <a href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a> </div> i dont get the popup effect, the video just loads on a separate window. and i want it to load as […]
Hello, the auto-play function from the background videos of Revolution Slider does not work on mobile devices. “In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled.” More information: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html The same thing for Android devices. […]
Slide HTML: <li data-transition="fade" data-slotamount="13" data-masterspeed="300" > <img src="img/slides/slide-bg.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <div class="tp-caption customin customout" data-x="center" data-hoffset="0" data-y="center" data-voffset="0" data-customin="x:50;y:150;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:0;transformOrigin:50% 50%;" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="800" data-start="700" data-easing="Power4.easeOut" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index: 3"> <a class="popup-youtube" href="http://www.youtube.com/watch?v=hcIq2OSZQSc"> <img src="img/projects/project.jpg" alt=""> </a> </div> </li> Add to js/custom.js $(document).ready(function() { $(‘.popup-youtube’).magnificPopup({ disableOn: 700, type: ‘iframe’, mainClass: ‘mfp-fade’, removalDelay: 160, […]
Lightbox youtube video example: HTML: <a class=”popup-youtube” href=”http://www.youtube.com/watch?v=0O2aH4XLbto”>Open YouTube Video</a> Then in the JS (can be in the file js/custom.js) you add a call to the lightbox plugin, like this: $(document).ready(function() { $(‘.popup-youtube’).magnificPopup({ disableOn: 700, type: ‘iframe’, mainClass: ‘mfp-fade’, removalDelay: 160, preloader: false, fixedContentPos: false }); }); For more information you can see the plugin […]
