I am currently attempting to embed a YouTube video on my website bearblog. My objective is to make the video adaptable in width for both mobile and computer viewing, while also enabling the YouTube fullscreen feature.
I have followed the guidelines provided here and here YouTube iframe embed - full screen
/* Define the aspect ratio */
.video-container {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
}
/* Set the max-width of the parent element */
.video-wrap {
width: 100%;
max-width: 600px;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
and I inserted the video as follows:
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"
allowfullscreen></iframe>
</div>
</div>
Despite the video's adjustable width, the fullscreen option is not available. The message just states:
Full screen is unavailable.
Find out more
I have attempted various methods such as:
allowFullScreen="true"
allowFullScreen="allowFullScreen"
allowFullScreen
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"
Unfortunately, none of these solutions have been successful.
PS. Following the advice of @Marco Aurelio Fernandez Reyes, I inspected the console and received the following output:
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"></iframe>
</div>
</div>
It appears that the fullscreen commands are being disregarded.