Two New Problems: Container Alignment, No YouTube Connection

Currently, I can’t reproduce any of your issue. Please, send direct link or make video from start to end how to reproduce your issues

3. You need to enable overlay. In latest update, I renamed words in video block, so, now it’s more clear how to enable lightbox

When I have time, I’ll make a container and screencap it with video so you can see the process. Containers only justify left.

About the video block, I enabled overlay and chose the lightbox option. It works. Is there a way to position the video within the lightbox? I still have the problem with the video not connecting to YouTube.

Thanks.

• This reply was modified 2 years, 4 months ago by monkeywisdom.

Hi. I have a screencap video of the alignment problems for containers and video problems. It’s 90MB. Where should I send it and should I compress it more? Thanks.

Actually, here’s the video link: https://mega.nz/file/goMiCCAS#LnIjhRwnnBVlCzTsePUvIOn_uiUguXkc8nCj2TumVvY

Hm, strange, you found time to make 20 minute video but didn’t find time to watch 20 minute video with tutorial

Ok. First of all, you make a common mistake when you try to use container for layout structure. Container is for wrapping elements. For layout structure you need to use Row block. Also, align and width are affected by your theme. I already posted you link to tutorial to show you how to prevent this and how to make proper layouts with full width which should work with all Gutenberg supported themes (not all of them have such support, easiest way to check this, look at root folder of theme, it must have theme.json file if it has good Gutenberg support)

Full width gutenberg page

Once you add Row, even with 1 column, you can enable flexbox inside column. Also, you don’t need to do this for aligning simple blocks like image, because image has own align option which must be used. Flexbox option is more for complex scenarios. Row options are also explained in video

Row options

Thanks for the resources. You say you already provided them, but there were only two threads and you don’t post anything in either of them until now. That’s why documentation is important. There is a YouTube channel. I wouldn’t have known which video to watch first. About video playback, do you know what’s causing that error? It says YouTube refuses to connect. It also creates weird errors when using browser checking tools and also within Gutenberg. Sometimes I get a message in Gutenberg that a block is invalid because that video element is in it. Thanks.

About video playback – I don’t know because you still didn’t provide me link to page

Please, share screenshot of settings of videoblock. I tried the same video and it works perfectly for me

https://monosnap.com/file/XkpXFS7rHsVotgrPsFhll3b2s3LYXT

I compared code and I see that your page has not the same code as our block. For me, it looks like you have some kind of lazy load plugin which breaks code of video block. Try to disable other youtube plugins and disable lazy loading for video

Hi. Here’s the settings screencap video. I added new settings like lightbox and overlay and play button. I’ll check out lazy load. That could be from the theme. I’ll check it out. Remember from the earlier video that the error message was “www.youtube.com refuses to connect.” https://mega.nz/file/sp1xHbzT#54hr-ewVcmteG1_u8pRneh-e_geyRkeflcGshaZ3tuw

… and here’s the source code: <div class="wp-block-greenshift-blocks-video aligncenter gs-video youtube gspb_video-id-gsbp-e0563f15-bede" id="gs-video-gsbp-e0563f15-bede"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=2PETV2a0vzc" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="true" data-modestbranding="true" data-suggested="false" frameborder="0" allowfullscreen></iframe><div style="background-image:url(https://www.deepermeditation.net/blog/wp-content/plugins/phastpress/phast.php/c2VydmljZT1pbWFnZXMmc3JjPWh0dHBzJTNBJTJGJTJGd3d3LmRlZXBlcm1lZGl0YXRpb24ubmV0JTJGYmxvZyUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGMjAyMiUyRjA3JTJGanVzdC1hLXRlc3QuanBnJmNhY2hlTWFya2VyPTE2NTg3ODU3NzItOTE1NTAmdG9rZW49NmM2OTNlN2QxYTE2MDg1Zg.q.jpg)" class="gs-video-overlay" data-type="youtube" data-lightbox="true"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:&quot;&quot;;display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:&quot;&quot;;display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#9b51e0;background-image:;opacity:0.5"></div></div></div></div>

Source code is correct, but I don’t see all tags on site and wrong link of conversion. So, somehow your site converts tags, usually because you have lazy load plugin for videos. Try to disable other plugins one by one

Also in your YouTube link replace watch to embed

The lazy load is coming from the theme. I did accidentally have Phastpress image lazy loading on until last night. Maybe the code is different now. By the way, which tags are you referring to? And what is “link of conversion?” What should the code look like? Here’s what it looks like now.

<div class="wp-block-greenshift-blocks-video aligncenter gs-video youtube gspb_video-id-gsbp-e0563f15-bede" id="gs-video-gsbp-e0563f15-bede"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=2PETV2a0vzc" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="true" data-modestbranding="true" data-suggested="false" frameborder="0" allowfullscreen></iframe><div style="background-image:url(https://www.deepermeditation.net/blog/wp-content/plugins/phastpress/phast.php/c2VydmljZT1pbWFnZXMmc3JjPWh0dHBzJTNBJTJGJTJGd3d3LmRlZXBlcm1lZGl0YXRpb24ubmV0JTJGYmxvZyUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGMjAyMiUyRjA3JTJGanVzdC1hLXRlc3QuanBnJmNhY2hlTWFya2VyPTE2NTg3ODU3NzItOTE1NTAmdG9rZW49NmM2OTNlN2QxYTE2MDg1Zg.q.jpg)" class="gs-video-overlay" data-type="youtube" data-lightbox="true"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:&quot;&quot;;display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:&quot;&quot;;display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#9b51e0;background-image:;opacity:0.5"></div></div></div></div>

Please, try to use word “embed” instead “watch” in your youtube link

Hi again. I’m not seeing the thread here, but I found your reply in email. I changed the video link, replacing “watch” with “embed”. On some browsers, nothing happens when I hit the play button. On others, I get: “An error occurred. Please try again later. (Playback ID: QNYrlKAft0JQrnPV)”

Did you try to disable lazy loading plugins?