![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
March 21, 2018 at 2:54 am #930214
Hi,
I want to be able to play a youtube video full width and I need it to work on mobile and be responsive. How do I make that happen?
I have tried revolution slider and that makes it full width but it doesn’t show the screen controls to play. It only allows to play once the screen moves so this isn’t a viable option. I know layerslider won’t work with video on mobile so that is USELESS.I tried the plugin “YouTube Free” and have a text box showing [embedyt] youtube link [/embedyt] but the video doesn’t display full width.
Someone please help with details on what viable options I can do.
Thanks!
March 22, 2018 at 6:49 am #931060Hey webguy007,
I know layerslider won’t work with video on mobile so that is USELESS.
You can actually use the layer slider to create a full width background video that will work both on desktop and mobile. Create a layer, set the type to Video / Audio and then look for the “Use this video as slide background” option. .
Best regards,
IsmaelApril 2, 2018 at 5:38 am #935891I can’t seem to get this working.
My first issue is when I set up in the Layerslider WP Video/Auto, I have the following code:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/5kTP_6qW6IU” frameborder=”0″ allowfullscreen></iframe>I then have a text box with the shortcode: [layerslider id=”9″] and the video doesn’t show.. only a white circle turning. Why?
I’m also using 6.51 Layer Slider as well.
Thanks
April 2, 2018 at 6:53 am #935913Hi webguy007,
https://cl.ly/281Y2s120c1o Here is how it works on my side. Please try these settings.
Best regards,
VictoriaApril 2, 2018 at 7:28 am #935929Hi,
One issue when select the video as slide background is it doesn’t have the you tube controls. I need it to display full width and have the controls as well as play sound. When I select it not to use video as background, it has black space on the left and right and I can’t seem to make it full width.
I also want it to play on mobile.
Am I able to do this?
Thanks
April 2, 2018 at 8:35 am #935960Hi webguy007,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaApril 2, 2018 at 9:48 pm #936207This reply has been marked as private.April 3, 2018 at 9:27 am #936396Hi webguy007,
Please use the docs to see how this can be achieved:
If you need further assistance please let us know.
Best regards,
VictoriaApril 3, 2018 at 4:04 pm #936630with iframe it was possible to do that – but the iframe function is buggy on enfold since a long time.
i mentioned it here: https://kriesi.at/support/topic/new-enfold-troubles-with-iframe/
I also noticed that when I wanted to embed a video with very specific characteristics: https://kriesi.at/support/topic/new-enfold-troubles-with-iframe/#post-906379April 3, 2018 at 7:56 pm #936753Victoria,
1. I really am not sure what is or not happening here with my issue. Did you login to the system and make any changes?
2. I don’t have Layslider WP PRO as indicated in the doc file you linked. You only supply LayerSlider WP. Regardless, I still am unable to properly
have ENFOLD display a Youtube video that is sitting at youtube. Why am I getting a white circle instead of the video playing?If you could be specific on how I solve this problem, that would be greatly appreciated as I’ve lost 3 days trying to figure out this problem.
Thank you
April 4, 2018 at 7:24 am #936977Hi,
We adjusted the volume options to enable the sounds. Unfortunately, you can’t modify the video controls and loop parameter. (see private field)
Best regards,
IsmaelApril 4, 2018 at 7:35 am #936986I haven’t checked form desktop but when viewing from my mobile phone (iPhone 7plus). I can not play the YouTube video. Only a static photo shows.
Which is my whole point in enfold being able to play a proper YouTube video issue I’m having. In wanting it to display full width.
I assume this can’t be done and can’t be done allowing a user to view on a mobile phone?
Shocking if it can’t….April 5, 2018 at 7:38 am #937520does this comes near to your aim: https://webers-testseite.de/video-tut/
but if screen size is very big the height will be more than screen height sometimes – and autoplay will not work on some mobile phonesbut why not playing in lightbox: https://webers-testseite.de/videos-on-lightbox/
You can have then a nice masonry or something like that with images an link to video lightboxesApril 5, 2018 at 8:44 am #937550Solution One is :
Colorsection with code-block element in it ( all checkmarks not enabled )
Content of the codeblock is<div class="responsive-container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/5kTP_6qW6IU?enablejsapi=1&loop=1&autoplay=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3" gesture="media" allow="encrypted-media" allowfullscreen></iframe> </div>
( the ecver=2 is new to youtube videos – it restrains the related videos on pause – it is similar to rel=0 which hampers the related videos on the end)
this to quick css (very similar to enfold lightbox settings
.responsive-container { position: relative; overflow: hidden; padding-top: 56.25vw; } .responsive-iframe { position: absolute; top: 0; left: 0; width: 100vw; height: 56.25vw; border: 0; } .responsive .page-id-31239 #av_section_1 .container { max-width: 100% !important; width: 100% !important; padding: 0; }
________________
Solution Two:
Videoscreenshot Image with custom link:https://www.youtube.com/watch?v=5kTP_6qW6IU?enablejsapi=1&autoplay=1&loop=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3&iframe=true
To have nearly maximum lightbox size – this to quick css:
(i only set it for that page – you have to alter that).page-id-31341 .mfp-container { text-align: inherit; position: absolute; width: 98vw; height: 55.125vw; left: 50%; transform: translateX(-50%); padding-top: 50px; } .page-id-31341 .mfp-iframe-holder .mfp-content { max-width: 100%; width: 100% } .page-id-31341 div.avia-popup .mfp-close { right: 5px; top: 5px !important; background: #900; border: 2px solid #ffee00; }
April 5, 2018 at 8:44 am #937551Guenni007: Actually the full screen is what I need but the client doesn’t want it to autostart. They want the play symbol showing to start.
As far as mobile,theyI don’t want autostart either. Just want a play symbol to start.
How do I accomplish this?The client doesn’t want a lightbox.
Thanks!
April 5, 2018 at 8:47 am #937554so get rid of the autoplay=1
<div class="responsive-container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/5kTP_6qW6IU?enablejsapi=1&loop=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3" gesture="media" allow="encrypted-media" allowfullscreen></iframe> </div>
btw. you can setup all css inline via functions.php of your child theme – then you can erase the quick css entries:
function set_container_for_responsive_youtubevideo(){ ?> <script> (function($){ $('.responsive-container').css({ "position": "relative", "overflow": "hidden" , "padding-top": "56.25vw" }); $('.responsive-iframe').css({ "position": "absolute", "top": "0" , "left": "0", "width": "100vw" , "height": "56.25vw" , "border": "0" }); $('.responsive-container').closest('.container').css({ "max-width": "100%", "width": "100%" , "padding": "0px" }); })(jQuery); </script> <?php } add_action('wp_footer', 'set_container_for_responsive_youtubevideo');
you can see here on another test-page that the right css goes to the concerning section – if code-block looks like: https://webers-testseite.de/new-test-with-youtube-video/
<div class="responsive-container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/5kTP_6qW6IU?enablejsapi=1&loop=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3" gesture="media" allow="encrypted-media" allowfullscreen></iframe> </div>
April 5, 2018 at 9:43 am #937567and this is a very usefull tool is: https://developers.google.com/youtube/youtube_player_demo
on the footer you can switch the languages !
on inserting the video-id of your video 5kTP_6qW6IU and click “update player with selected options” the iframe code gets updated.
one thing to mention: the new ecver isn’t embedded on that page and if you choose “no modestbranding” ecver option does not work !Important: press “show player controls” to have full access to all “screws” you can turn
April 5, 2018 at 11:10 am #937601dear mods – i do not know why the iframe works on this now – the only difference is that here in the iframe surrounded by some divs in the code-block element. Or are there some fixes in the meanwhile since my last posting concerning to this iframe issue ( january 18 )
April 13, 2018 at 2:32 am #941214This reply has been marked as private.April 13, 2018 at 2:51 am #941215This reply has been marked as private.April 16, 2018 at 3:11 am #942384Hi,
The media file is not found. Please check the video url or re-upload it.
/contact/ymedia.com/wp-content/uploads/2017/08/CONTACT-FINAL-no-music.mp4 Failed to load resource: the server responded with a status of 404 (Not Found)
Best regards,
IsmaelApril 16, 2018 at 5:37 am #942418This reply has been marked as private.April 16, 2018 at 6:25 am #942431This reply has been marked as private.April 17, 2018 at 6:04 am #942938 -
AuthorPosts
- You must be logged in to reply to this topic.