I know this questions has been asked numerous times but I can't seem to fix the problem at my case. So I have added youtube video iframe to my website and while the video isn't playing it shows it in a full screen. Then when I click play it adds gaps on left and right and video isn't playing in a full size. I checked from console and found out that the video
tag is caussing problems. I tried adding css to video tag but it seems like its not even showing in console, so it's not added.
HTML:
<iframe height="450" src="https://www.youtube.com/embed/ftAQc3L1gR4?rel=0&autoplay=0&loop=0&modestbranding=0&showinfo=0&feature=0&controls=0&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" id="player_1" style="width: 100%;"></iframe>
CSS:
iframe video {
width: 100% inherit !important;;
height: inherit !important;
left: inherit !important;
top: inherit !important;
position: relative !important;
}
You can check the issue here: https://raadev.wpengine.com
You can go to the third slides and there will be a youtube iframe showing in 100% width, but when you click play it will show gaps on both sides.
Can anyone please help me fix this issue?